Flutter RenderBox was not laid out

问题描述

• 实现界面的时候，将 ListView 作为 Column 的子组件
• 运行项目，错误信息如下

Flutter RenderBox was not laid out

原因分析

• ListView 无法确定自己的高度
  • Column 在竖直方向上对其子组件 没有高度约束
  • ListView 在竖直方向上 尽可能占满空间，于是其期望高度为无穷大
  • flutter 框架无法绘制无穷大的组件

解决方案

使用 Expanded 包裹 ListView

• Expanded 在竖直方向上 占满屏幕剩余的空间，其高度为 x
• 然后将此高度约束传递给 ListView ，于是其高度为 x

Flutter 的布局原则

在 Flutter 中，每个父组件会向子组件 传递布局约束（constraints），告诉它：

你能有多大（min/max 宽高）。

然后子组件必须根据这些约束 决定自己的大小，再告诉父组件自己多大。
父组件再根据这些尺寸布局其他子组件。

参考资料

• dart - Flutter: RenderBox was not laid out - Stack Overflow