Flutter中如何让Scrollbar宽度小于子组件并实现特定滚动布局？

要同时实现两个需求，关键是将Scrollbar的边距与滚动内容的布局分离，通过嵌套容器单独控制Scrollbar的范围：

Scrollbar(
  thumbVisibility: true,
  controller: scrollController,
  // 给Scrollbar的直接子容器设置左右边距，让Scrollbar与屏幕边缘保持距离
  child: Container(
    margin: const EdgeInsets.symmetric(horizontal: 15), // 可根据需求调整边距值
    child: SingleChildScrollView(
      controller: scrollController,
      scrollDirection: Axis.horizontal,
      // 滚动内容不设置左右边距，保持可超出屏幕的特性
      child: Row(
        children: [
          for (int i = 0; i < 25; i++)
            Container(
              margin: const EdgeInsets.only(right: 20),
              color: Colors.red,
              height: 100,
              width: 100,
            )
        ],
      ),
    ),
  ),
)

实现原理 #

• Scrollbar的范围由其直接子容器决定，给这个容器设置水平边距，就能让Scrollbar不触碰屏幕边缘。
• 滚动内容（SingleChildScrollView内的Row）不添加额外水平边距，红色方块可以自然超出屏幕边缘，滚动时在屏幕边界处消失。

需求与当前问题回顾 #

需求 #

• 横向滚动组件可“超出屏幕”（滚动内容在屏幕边缘处消失）
• Scrollbar不触碰屏幕边缘

当前问题 #

添加内边距会同时作用于滚动方块和Scrollbar，无法单独控制两者的布局范围。

示意图：

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