Flutter中AlertDialog内嵌ListView.builder出现渲染报错问题

报错根因 #

• Scaffold 的 body 区域会向子组件传递边界明确的强布局约束，子组件的可用宽高被严格限定。此时 Column 内的 Expanded 可以正常分配剩余空间，包裹的 ListView 能拿到明确高度边界完成布局，因此运行正常。
• AlertDialog 的 content 区域默认没有固定高度约束，属于垂直方向无界的布局场景。此时在 Column 中使用 Expanded 包裹 ListView，Expanded 会尝试占据无限的垂直可用空间，直接触发 RenderFlex 溢出、Viewport 无限高度的渲染错误。

修复方法 #

移除不必要的 Column + Expanded 嵌套，给 ListView 开启自适应高度属性即可：

// 修复后的MyContent实现
MyContent() {
  return ListView.builder(
    shrinkWrap: true, // 核心配置：让ListView根据子项总高度自适应，不尝试撑满全部可用空间
    itemCount: names.length,
    itemBuilder: (context, index){
      return ListTile(
        title: Text(names[index]),
        // 补充点击选择后返回结果的逻辑，对应openDialog的返回值接收
        onTap: () => Navigator.pop(context, names[index]),
      );
    }
  );
}

如果你的列表项数量较多，不想让弹窗高度随列表项无限变高，可以在外层加固定高度约束：

MyContent() {
  return SizedBox(
    width: double.maxFinite,
    height: 300, // 自定义弹窗内容的固定高度
    child: ListView.builder(
      itemCount: names.length,
      itemBuilder: (context, index){
        return ListTile(
          title: Text(names[index]),
          onTap: () => Navigator.pop(context, names[index]),
        );
      }
    ),
  );
}

注意事项 #

• Expanded 仅能在有明确主轴约束的 Flex 组件（Column/Row）下正常工作，不要在无界约束容器（如弹窗content、滚动组件内部）直接使用。
• shrinkWrap: true 会一次性计算所有子项的布局高度，适合列表项数量较少的场景；如果列表项超过百条，建议使用固定高度包裹的写法，避免一次性计算大量子项布局造成性能损耗。

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