Flutter：横向CustomScrollView内如何竖向排列多个SliverList？

要在横向滚动的CustomScrollView中实现竖向排列多个SliverList的效果，你可以将需要竖向组合的SliverList嵌套进一个竖向的CustomScrollView，再通过SliverToBoxAdapter将其包装为横向CustomScrollView可识别的Sliver组件。具体实现如下：

修改后的代码 #

CustomScrollView(
  scrollDirection: Axis.horizontal,
  slivers: [
    SliverToBoxAdapter(
      child: Container(height: 600, width: 400, color: Colors.red),
    ),
    // 替换原Column的正确实现
    SliverToBoxAdapter(
      child: SizedBox(
        width: 400, // 根据需求设置竖向区域的宽度
        child: CustomScrollView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          // physics: NeverScrollableScrollPhysics(), // 不需要内部竖向滚动时打开此行
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => SomeExpensiveWidget(index),
                childCount: 10000,
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => SomeCustomRowWidget(index),
                childCount: 10000,
              ),
            ),
          ],
        ),
      ),
    ),
    SliverToBoxAdapter(
      child: Container(height: 600, width: 400, color: Colors.red),
    ),
  ],
),

关键细节说明 #

• 内部竖向CustomScrollView必须设置shrinkWrap: true，确保它根据子Sliver的总高度自适应，而非强制占用无限高度
• 外层SizedBox用来约束竖向区域的宽度，适配横向滚动的布局逻辑
• 若不需要内部区域单独竖向滚动，可添加physics: NeverScrollableScrollPhysics()关闭滚动行为
• 该方案完全保留了SomeCustomRowWidget在Row内的伸缩逻辑，不会影响原有组件功能

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