使用DraggableScrollableSheet搭配Sliver出现BoxConstraints无限高度报错如何解决

报错核心原因 #

1. DraggableScrollableSheet被放在无高度约束的Column子节点中，Column会给子元素传递垂直方向无限高度的约束，而DraggableScrollableSheet需要基于父级明确的可用高度计算自身滑动范围，高度约束冲突直接触发报错。
2. SliverChildBuilderDelegate未指定childCount参数，默认无限生成子元素，进一步触发无限高度布局错误。
3. 多层滚动组件嵌套未处理滚动冲突，内层滚动和外层DraggableScrollableSheet的滚动控制器出现手势抢占冲突。

修复步骤 #

1. 给DraggableScrollableSheet增加高度约束 #

用Expanded包裹DraggableScrollableSheet，使其占满Column中除了Header之外的剩余可用高度，提供明确的高度上限。

2. 配置DraggableScrollableSheet基础参数 #

指定initialChildSize、minChildSize、maxChildSize三个参数，明确组件的初始显示比例、最小显示比例、最大显示比例。

3. 修复Sliver列表配置 #

给SliverChildBuilderDelegate添加childCount: 1，避免无限生成子元素。

4. 解决滚动冲突 #

给内层CustomScrollView添加physics: NeverScrollableScrollPhysics()，将滚动控制权完全交给外层DraggableScrollableSheet的滚动控制器。 #

修复后的核心代码示例 #

child: Column(
  children: [
    Header(),
    // 新增Expanded包裹提供明确高度约束
    Expanded(
      child: DraggableScrollableSheet(
        // 新增基础配置参数，数值可根据业务需求调整
        initialChildSize: 0.5,
        minChildSize: 0.2,
        maxChildSize: 1.0,
        builder: (BuildContext context, ScrollController scrollController) =>
            NestedScrollView(
          controller: scrollController,
          headerSliverBuilder:
              (BuildContext context, bool innerBoxIsScrolled) => [
            SliverToBoxAdapter(
              child: IntroMainScreenWidget(),
            ),
          ],
          body: CustomScrollView(
            // 新增禁用内层滚动，避免手势冲突
            physics: NeverScrollableScrollPhysics(),
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => HomeScreen(),
                  // 新增childCount参数，限定子元素数量
                  childCount: 1,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
),

内容的提问来源于stack exchange，提问作者Mahmoud Al-Haroon