如何让Column布局中的第二个ListView占满剩余可用空间

算力阿峰

2026-9-24

问题根源

你遇到的布局异常来自两个核心原因：

第一个ListView（Widget1）开启了shrinkWrap: true，会根据自身item总高度撑开尺寸，不受父容器Column的高度约束，当Widget1内容总高度超过阈值时就会出现溢出报错
单独给第二个ListView套Expanded时，没有对第一个ListView的高度做上限限制，导致Widget1优先占用高度后超出Column总可用空间

解决方案

按如下规则调整代码即可实现需求：

Widget1有内容时仅占用自身内容所需高度，剩余空间全部分配给Widget2
Widget1内容全部清空后，Widget2自动占满整个父容器高度
不会出现布局溢出报错

1. 父容器Column代码调整

给Widget1套Flexible（默认fit: FlexFit.loose，允许子组件小于分配的空间），Widget2保留Expanded占满剩余空间：

return Column(
  children: [
    Flexible(
      child: Widget1(),
    ),
    Expanded(
      child: Widget2(),
    ),
  ],
);

2. Widget1（第一个ListView）代码调整

可选：如果需要限制Widget1的最大高度，避免内容过多挤压Widget2的显示空间，可以外层套ConstrainedBox做高度限制：

ConstrainedBox(
  // 可根据业务需求调整最大高度，也可以通过MediaQuery动态计算屏幕占比
  constraints: const BoxConstraints(maxHeight: 350),
  child: ListView.builder(
    shrinkWrap: true,
    controller: ScrollController(),
    itemBuilder: (ctx, idx) => SingleJobItem(controller.jobList[idx], key: UniqueKey()),
    itemCount: controller.jobList.length,
  ),
);

3. Widget2（第二个ListView）代码调整

关闭shrinkWrap，因为Expanded已经给它分配了确定的高度，开启shrinkWrap会产生不必要的布局计算，也容易引发冲突：

ListView.builder(
  shrinkWrap: false,
  controller: ScrollController(),
  itemBuilder: (ctx, idx) => SingleJobItem(controller.jobList[idx], key: UniqueKey()),
  itemCount: controller.jobList.length,
);

原理解释

Flexible给Widget1做了高度上限约束，它的最大高度不会超过Column总高度减去Widget2的最小可显示高度，从根源避免溢出
Widget1的shrinkWrap: true保证它仅占用自身内容所需的高度，不会强行占满Flexible分配的最大可用空间
Widget2外层的Expanded会强制它占完Column剩余的所有可用空间，当Widget1内容清空时，就会自动占满整个父容器高度

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