Flutter中如何在Widget旁添加不覆盖内容的滚动条？

要让ScrollBar不覆盖GridView内容，核心是给GridView留出滚动条的空间，或者将ScrollBar与GridView分开布局并同步滚动状态。以下是两种可靠的实现方式：

方式一：给GridView添加右侧内边距 #

通过给GridView设置padding属性，在右侧留出足够容纳滚动条的空间，这样滚动条就不会覆盖内容了。默认ScrollBar的宽度大概8-12px，设置16px左右的内边距足够适配：

Scaffold(
  body: Scrollbar(
    thumbVisibility: true,
    interactive: true,
    child: GridView.count(
      crossAxisCount: 5,
      crossAxisSpacing: 6,
      // 右侧添加内边距，避开滚动条区域
      padding: const EdgeInsets.only(right: 16),
      children: List.generate(
        100,
        (index) => Text('I am text$index'),
      ),
    ),
  ),
)

方式二：分离ScrollBar与GridView（更灵活的布局） #

如果需要更精确控制滚动条的位置、宽度，可以使用ScrollController同步两者的滚动状态，用Row将GridView和ScrollBar并列布局：

class _MyPageState extends State<MyPage> {
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 占满剩余宽度的GridView
          Expanded(
            child: GridView.count(
              controller: _scrollController,
              crossAxisCount: 5,
              crossAxisSpacing: 6,
              children: List.generate(
                100,
                (index) => Text('I am text$index'),
              ),
            ),
          ),
          // 独立的滚动条
          Scrollbar(
            controller: _scrollController,
            thumbVisibility: true,
            interactive: true,
            // 自定义滚动条宽度
            child: const SizedBox(width: 8),
          ),
        ],
      ),
    );
  }
}

说明 #

• 方式一简单快捷，适合大多数常规场景，仅需调整内边距就能解决覆盖问题。
• 方式二更灵活，适合需要自定义滚动条样式、位置的场景，通过控制器确保滚动条与GridView的滚动行为完全同步。

内容的提问来源于stack exchange，提问作者Arfeen Yousuf