Flutter中如何让嵌套SingleChildScrollView的滚动条始终显示？

嵌套ScrollBar时出现垂直滚动条仅在水平滚动到末端才显示的问题，本质是原生ScrollBar会自动关联最近的滚动组件，导致垂直滚动条的布局被水平SingleChildScrollView的边界限制。要让两个滚动条始终可见，推荐使用RawScrollBar替代原生ScrollBar，它能更灵活地绑定目标滚动控制器，不受父级滚动组件的布局约束影响。

解决方案代码示例 #

首先定义两个滚动控制器：

final _horizontalController = ScrollController();
final _verticalController = ScrollController();

方案一：嵌套RawScrollBar

RawScrollBar(
  // 绑定水平滚动控制器
  controller: _horizontalController,
  thumbVisibility: true,
  axis: Axis.horizontal,
  child: RawScrollBar(
    // 绑定垂直滚动控制器
    controller: _verticalController,
    thumbVisibility: true,
    axis: Axis.vertical,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      controller: _horizontalController,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        controller: _verticalController,
        child: // 你的表格内容
      ),
    ),
  ),
)

方案二：Stack布局分离滚动条

如果担心嵌套层级影响，也可以用Stack将两个滚动条与滚动视图分离：

Stack(
  children: [
    // 双向滚动的表格容器
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      controller: _horizontalController,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        controller: _verticalController,
        child: // 你的表格内容
      ),
    ),
    // 水平滚动条
    RawScrollBar(
      controller: _horizontalController,
      thumbVisibility: true,
      axis: Axis.horizontal,
    ),
    // 垂直滚动条
    RawScrollBar(
      controller: _verticalController,
      thumbVisibility: true,
      axis: Axis.vertical,
    ),
  ],
)

关键说明 #

• RawScrollBar通过axis明确指定滚动方向，配合controller精准绑定对应的滚动视图，避免了原生ScrollBar自动关联父级滚动组件的问题。
• 务必设置thumbVisibility: true，确保滚动条始终显示，而非仅在滚动操作时出现。

内容的提问来源于stack exchange，提问作者David Escariz