Flutter：移除Dialog中Column内两个ListView间的空白

AI 小北

2026-8-3

解决Dialog中两个ListView之间的空白问题

你的问题出在Expanded和shrinkWrap: true的组合使用，以及ListView默认的内边距上，以下是具体修复方案：

问题原因

给shrinkWrap: true的ListView套上Expanded时，Expanded会强制ListView占据Column中所有可用的剩余空间，直接导致两个列表之间出现多余空白。
ListView组件默认带有上下内边距，也会额外增加不必要的空白区域。

修复步骤

移除包裹ListView的Expanded组件：shrinkWrap: true已经让ListView根据自身内容高度自适应，不需要Expanded来分配空间。
清除ListView的默认内边距：给ListView添加padding: EdgeInsets.zero，去掉默认空白。
保持Column的mainAxisSize: MainAxisSize.min，确保Dialog内容只占用必要高度。

修改后的完整代码

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    content: SizedBox(
      width: double.maxFinite,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text('Text1'),
          ListView.builder(
            shrinkWrap: true,
            padding: EdgeInsets.zero, // 移除默认内边距
            scrollDirection: Axis.vertical,
            itemCount: listOne.length,
            itemBuilder: (context, index) {
              return Text(listOne.elementAt(index).name);
            },
          ),
          const Text('Text 2'),
          ListView.builder(
            shrinkWrap: true,
            padding: EdgeInsets.zero, // 移除默认内边距
            scrollDirection: Axis.vertical,
            itemCount: listTwo.length,
            itemBuilder: (context, index) {
              return Text(listTwo.elementAt(index).name);
            },
          ),
        ],
      ),
    ),
  ),
);