如何让Flutter中水平方向的CustomScrollView支持垂直滚动？

要在保留原有水平CustomScrollView的基础上添加垂直滚动能力，只需将其嵌套到一个垂直方向的可滚动组件中即可，具体实现如下：

修改后的完整代码 #

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: CustomScrollView(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true, // 核心配置：让CustomScrollView自适应内容高度
    slivers: <Widget>[
      SliverToBoxAdapter(child: Container(
          height: 800, width: 200, color: Colors.red)),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          childCount: 30,
          (BuildContext context, int index) {
            return Container(
              padding: const EdgeInsets.all(16),
              alignment: Alignment.center,
              color: Colors.blue,
              height: 800,
              child: Text('Item: $index'),
            );
          },
        ),
      ),
      SliverToBoxAdapter(child: Container(
          height: 800, width: 200, color: Colors.red)),
    ],
  ),
)

关键细节说明 #

• 外层SingleChildScrollView：负责处理垂直方向的滚动，设置scrollDirection: Axis.vertical即可。
• 内层CustomScrollView的shrinkWrap: true：必须开启这个属性，因为外层垂直滚动组件无法给内层提供固定的垂直约束，开启后CustomScrollView会根据自身内容的实际高度来确定尺寸，避免布局报错。
• 滚动逻辑分离：外层处理垂直滚动，内层保留原有的水平滚动逻辑，两者独立工作，实现双向滚动的需求。

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