Flutter中Expanded组件抛出RenderBox未布局异常的解决方法

问题根源 #

RenderBox was not laid out异常是因为Expanded必须作为Column/Row等Flex组件的直接子组件，它依赖Flex组件提供的主轴尺寸约束来分配剩余空间。直接在Dialog的child中使用Expanded，会因缺少Flex父级的约束导致布局计算失败。

正确实现方式 #

1. 修正自定义MyDialog组件

移除不必要的Expanded，利用Dialog自带的宽度约束让文本自动换行，同时通过mainAxisSize: MainAxisSize.min确保Dialog高度适配内容：

class MyDialog extends StatelessWidget {
  final Widget? content;
  const MyDialog({super.key, this.content});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Padding(
        padding: const EdgeInsets.all(16.0), // 添加内边距优化显示
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 文本自动换行核心：设置maxLines为null，允许无限换行
            content ?? const Text(
              "默认长文本测试：这是一段需要完整换行显示的内容，用来验证自定义Dialog的布局是否正常，不会出现溢出或异常",
              maxLines: null,
              overflow: TextOverflow.visible,
            ),
            const SizedBox(height: 20),
            // 底部操作按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text("取消"),
                ),
                const SizedBox(width: 8),
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text("确认"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

2. 组件使用示例（保留Stack）

showDialog(
  context: context,
  builder: (context) {
    return Stack(
      children: [
        MyDialog(
          content: const Text(
            "自定义长文本内容：我是Flutter新手，在自定义Dialog时遇到了布局异常问题，现在通过正确的布局方式可以让这段文本完整换行显示，不会再出现RenderBox未布局的错误",
            maxLines: null,
          ),
        ),
        // Stack的其他业务组件
      ],
    );
  },
);

特殊场景处理 #

如果需要文本占满Dialog的全部宽度，可给Text包裹Container(width: double.infinity)，强制文本填充可用宽度：

Container(
  width: double.infinity,
  child: Text(
    "需要占满宽度的长文本...",
    maxLines: null,
  ),
)

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