Flutter树形/普通列表横竖滚动适配及布局报错修复求助

• 核心问题：双向滚动组件（比如嵌套的滚动视图）本身没有确定的尺寸约束，而Expanded必须依赖父级提供明确的可用空间，两者冲突导致RenderBox无法完成布局，触发child.hasSize断言失败。

• 修复方案1：给滚动容器绑定明确尺寸
  用LayoutBuilder拿到的父级约束，给内层滚动容器套个SizedBox锁死尺寸，同时配合shrinkWrap让列表根据内容收缩：

  LayoutBuilder(
    builder: (context, constraints) {
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal, // 横向滚动
        child: SizedBox(
          width: constraints.maxWidth, // 绑定父级最大宽度
          child: ListView.builder(
            shrinkWrap: true, // 让ListView根据子项高度自适应
            physics: const NeverScrollableScrollPhysics(), // 禁用垂直滚动，避免冲突
            itemCount: treeData.length,
            itemBuilder: (context, index) {
              // 你的含Expanded的树形子组件
              return Row(
                children: [
                  Expanded(child: Text(treeData[index].title)),
                  // 树形展开/收起按钮等组件
                ],
              );
            },
          ),
        ),
      );
    },
  )
  

• 修复方案2：用CustomScrollView统一管理滚动
  针对复杂的树形+普通列表混合场景，用CustomScrollView配合SliverConstrainedCrossAxis给列表绑定约束：

  LayoutBuilder(
    builder: (context, constraints) {
      return CustomScrollView(
        scrollDirection: Axis.horizontal,
        slivers: [
          SliverConstrainedCrossAxis(
            maxCrossAxisExtent: constraints.maxHeight, // 绑定父级高度
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Row(
                    children: [
                      Expanded(child: Text(treeData[index].content)),
                      // 树形层级组件
                    ],
                  );
                },
                childCount: treeData.length,
              ),
            ),
          ),
        ],
      );
    },
  )
  

• 必注意的细节

  • 嵌套滚动时必须禁用其中一方的滚动物理效果，否则会出现双重滚动冲突，进一步导致布局错误。
  • Expanded绝对不能放在无确定尺寸的容器里，滚动组件默认是无限尺寸，必须通过shrinkWrap、SizedBox这类组件强制给它一个明确的约束范围。
  • 如果树形组件有嵌套展开的子项，要确保展开后的子组件也继承父级的尺寸约束，别让子项又变成无尺寸状态。

内容的提问来源于stack exchange，提问作者Asma'a Abdullah