Flutter中Column内ListView.builder如何占满可用设备高度？

要让ListView.builder占据Column中除顶部Text外的全部可用高度，你可以按以下方式修改代码：

1. 移除固定高度的SizedBox，替换为Expanded组件：Expanded会在Column的垂直主轴方向上，自动占据所有剩余的可用空间，适配不同设备的屏幕高度。
2. 保持ListView.builder的shrinkWrap为默认的false（无需额外配置），这样它会完全填充Expanded分配的空间。

修改后的完整代码片段如下：

return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(
    backgroundColor: Colors.black,
    title: Text(
      'RAM FOOTBALL',
      style: GoogleFonts.anton(color: Colors.white),
    ),
  ),
  body: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          'Matches',
          style: GoogleFonts.anton(fontSize: 20),
        ),
      ),
      // 替换原SizedBox为Expanded
      Expanded(
        child: ListView.builder(
          itemCount: /* 你的数据集合长度 */,
          itemBuilder: (context, index) {
            return /* 自定义列表项组件 */;
          },
        ),
      ),
    ],
  ),
);

原理说明 #

• Column默认会根据子组件的固有尺寸分配垂直空间，直接放入无固定高度的ListView会因ListView高度无限触发布局错误。
• Expanded作为Column的子组件时，会将自身尺寸约束设置为"占据剩余所有可用空间"，强制ListView填充该空间，同时保留ListView的滚动功能。

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