Flutter嵌套Row/Column组件时触发RenderBox布局hasSize报错

报错核心原因 #

你遇到的RenderBox was not laid out、Failed assertion: 'hasSize'是典型的无界约束布局错误，触发逻辑如下：

• Row组件的水平主轴方向默认传递无界约束，不会限制子组件的水平宽度
• 你在Row中直接嵌套了Column，Column不会自动适配父级的水平可用宽度，会把无界的水平约束直接传递给它自己的子组件
• TextField默认会尝试占满水平方向的可用宽度，拿到无界宽度约束后无法计算出合法尺寸，直接触发布局断言崩溃

修复方法 #

只需要给Row内部嵌套的Column添加明确的宽度约束即可，最简便的方式是用Expanded组件包裹内层Column，让它自动占满Row的可用水平宽度。
修复后的核心布局代码：

// 替换你原来的Row部分代码即可
Row(
  children: [
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Login",
            style: TextStyle(color: Colors.white),
          ),
          const SizedBox(height: 12),
          buildEmail(),
          const SizedBox(height: 20),
          const Text(
            "Password",
            style: TextStyle(color: Colors.white),
          ),
          const SizedBox(height: 12),
          buildPassword(),
          // 后续可在此处添加登录按钮等其他UI元素
        ],
      ),
    )
  ],
)

预期UI参考 #

通用避坑提示：在Row、水平滚动ListView这类水平方向无界的容器中放置TextField、水平ListView这类需要占满水平宽度的组件时，必须先给子组件明确宽度约束；同理在Column、垂直滚动ListView这类垂直方向无界的容器中放置占满垂直高度的组件时，也需要先明确高度约束，否则都会触发同类布局错误。

内容的提问来源于stack exchange，提问作者Suraj Panda