Flutter ScrollBar始终可见实现：无滚动内容时仍保持显示

默认的Scrollbar组件会根据可滚动内容的范围自动控制thumb的显示，即使设置了thumbVisibility: true，当内容不足以滚动时也会隐藏。要实现始终可见的效果，可以试试以下两种方案：

方案一：用Stack叠加静态滚动条占位 #

通过Stack将原生Scrollbar和自定义静态滚动条容器叠加，原生Scrollbar正常处理滚动逻辑，静态容器在无滚动内容时显示占位：

Stack(
  alignment: Alignment.centerRight,
  children: [
    // 你的可滚动组件（示例用ListView）
    ListView.builder(
      controller: _scrollController,
      itemCount: _itemCount, // 可传入0或少量数据
      itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
    ),
    // 静态滚动条占位，匹配原生Scrollbar的样式参数
    Opacity(
      opacity: _hasScrollableContent ? 0 : 1,
      child: Container(
        width: 6,
        margin: EdgeInsets.symmetric(vertical: 8),
        decoration: BoxDecoration(
          color: Colors.grey.shade300,
          borderRadius: BorderRadius.circular(3),
        ),
      ),
    ),
    // 原生Scrollbar，覆盖在占位容器上
    Scrollbar(
      controller: _scrollController,
      thumbVisibility: true,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: _itemCount,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    ),
  ],
)

通过ScrollController判断是否存在可滚动内容：

bool get _hasScrollableContent {
  final position = _scrollController.position;
  return position.maxScrollExtent > position.viewportDimension;
}

方案二：自定义Scrollbar强制显示 #

继承原生Scrollbar，重写显示判断逻辑，强制thumb始终可见：

class AlwaysVisibleScrollbar extends Scrollbar {
  const AlwaysVisibleScrollbar({
    super.key,
    required super.child,
    super.controller,
    super.thumbVisibility = true,
    super.thickness,
    super.radius,
  });

  @override
  bool _showThumb(BuildContext context, ScrollMetrics metrics) {
    // 重写判断逻辑，始终返回true
    return true;
  }
}

使用时直接替换原生Scrollbar：

AlwaysVisibleScrollbar(
  controller: _scrollController,
  child: ListView.builder(
    itemCount: _itemCount,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

注意：该方案依赖Scrollbar的私有方法_showThumb，Flutter版本更新后可能需要同步调整实现。

补充说明 #

• 方案一更稳妥，不依赖框架内部实现，适合仅需占位效果的场景；
• 方案二更贴合原生Scrollbar的交互和样式，但需关注版本兼容性。

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