如何在Column组件中定义ListView并解决RenderingBox渲染错误？

错误原因 #

Column和ListView在垂直方向都没有默认的固定高度约束：ListView默认会尝试占用无限的垂直空间，而Column的子组件也会沿垂直方向无限制扩展，两者的布局逻辑冲突，最终触发RenderingBox相关错误。

正确的实现方式 #

以下是三种可行的解决方案：

1. 用Expanded包裹ListView #

Expanded会让ListView占据Column中剩余的所有可用垂直空间，这是最常用的方案：

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  bool active = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded( // 添加Expanded包裹
          child: ListView.builder(
            itemBuilder: (context, index) {
              return Text("data $index");
            },
            itemCount: 20, // 建议添加itemCount避免无限构建
          ),
        )
      ],
    );
  }
}

2. 给ListView设置固定高度 #

如果明确知道ListView需要的高度，可以用SizedBox或Container指定高度：

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  bool active = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 300, // 指定固定高度
          child: ListView.builder(
            itemBuilder: (context, index) {
              return Text("data $index");
            },
            itemCount: 20,
          ),
        )
      ],
    );
  }
}

3. 设置ListView的shrinkWrap为true #

让ListView根据子项的总高度自动收缩自身高度，但注意如果子项数量过多，会一次性构建所有子组件，影响性能，适合子项较少的场景：

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  bool active = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListView.builder(
          shrinkWrap: true, // 开启shrinkWrap
          physics: const NeverScrollableScrollPhysics(), // 可选：如果不需要ListView滚动，禁用滚动物理效果
          itemBuilder: (context, index) {
            return Text("data $index");
          },
          itemCount: 20,
        )
      ],
    );
  }
}

另外，建议给ListView.builder添加itemCount参数，避免无限循环构建子组件。

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