Flutter中ListView.builder放入含其他子组件的Column报错如何解决

报错原因 #

SingleChildScrollView 本身是无高度边界的滚动容器，它的直接子Column会继承无限的高度约束。而Expanded组件的作用是在有限高度的父容器中分配剩余空间，在无限高度的Column中无法计算可用尺寸，导致ListView.builder无法获取到合法的渲染尺寸，最终抛出hasSize断言错误。

修复方案 #

方案1：整个页面统一滚动（推荐，可保留外层滚动逻辑） #

如果你希望前面的100个Row和后面的列表内容一起跟随外层滚动，不需要ListView单独滚动，移除Expanded并给ListView.builder添加两个配置属性即可：

return Scaffold(
  appBar: AppBar(),
  body: SingleChildScrollView(
    child: Column(
      children: [
        for (int i = 0; i < 100; i++)
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [...],
              ),
          ),
        // 移除外层Expanded，添加shrinkWrap和physics属性
        ListView.builder(
          shrinkWrap: true, // 让ListView根据内容计算自身总高度，适配父容器约束
          physics: const NeverScrollableScrollPhysics(), // 禁用ListView自身滚动，跟随外层容器滚动
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {...},
        ),
      ],
    ),
  ),
);

方案2：固定顶部内容，列表单独滚动 #

如果你希望前面的100个Row固定在页面顶部，只有后面的列表区域可独立滚动，直接移除外层的SingleChildScrollView即可：

return Scaffold(
  appBar: AppBar(),
  // 移除外层SingleChildScrollView，Column高度变为页面有限高度
  body: Column(
    children: [
      for (int i = 0; i < 100; i++)
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [...],
            ),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (BuildContext context, int index) {...},
        ),
      ),
    ],
  ),
);

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