关于 Flutter Layout 你应该知道的
内容提要
本文讨论了 Flutter 的布局系统，重点介绍了无界约束和有界约束的概念。详细讲解了 Flex、Container、Stack、Row 和 Column 等组件的行为及使用方法，强调在 Flex 组件中避免使用无界约束的重要性，并提供了正确设置和调整布局的建议。
延伸解读
理解约束传递：布局的核心逻辑
Flutter 布局遵循自顶向下的约束传递机制。父组件向子组件传递 BoxConstraints，子组件在约束范围内决定自身尺寸并上报。文中 Container 的 clamp 示例表明，当子组件设置的约束与父约束冲突时，系统会以父约束为准，因此直接设置 constraints 不一定生效。理解这一机制，有助于预判组件在复杂嵌套中的实际表现。
无界约束下的常见错误与规避
在 Column 中直接放置 ListView 会触发“Vertical viewport was given unbounded height”错误，因为 Column 作为 Flex 无法确定如何安放一个无限高度的子组件。解决方法是为 ListView 设置 shrinkWrap=true，让其根据内容收缩。同理，在无界约束中为 Flexible 设置非零 flex 值也会导致 RenderFlex 错误，因为无限空间无法按比例划分。
Container 尺寸行为速查
Container 的尺寸表现取决于子组件和约束条件：无子组件且无约束时尽量充满可用空间；有子组件时以子组件尺寸为准；显式设置 width、height 或 constraints 可覆盖默认行为。文中测验表明，即使设置了 tight 约束，若与父约束冲突，最终仍可能被舍弃，此时需借助 Center 或 Align 等组件调整布局。
调试布局的实用工具
LayoutBuilder 可在构建时获取父组件传递的约束信息，适合根据可用宽度动态调整 UI，例如文中根据 maxWidth 是否大于 200 显示不同文本。MediaQuery 则用于获取屏幕尺寸、设备像素比等全局信息。两者结合使用，能更灵活地处理响应式布局和适配不同设备。
Q&A
什么是无界约束（Unbounded Constraints）？
无界约束指的是在某个方向上没有大小限制，常见于 ScrollView、ListView 和 GridView。
在 Flutter 中，Flex 组件的行为是什么？
在有界约束下，Flex 组件会尽量撑满空间；在无界约束下，会根据子组件的大小进行调整。
如何在 Column 中使用 ListView？
在 Column 中使用 ListView 时，需要将 ListView 的 shrinkWrap 设置为 true，以避免无界约束错误。
Stack 组件的主要特点是什么？
Stack 组件允许在其上层放置其他组件，非定位子组件会根据 Stack 的对齐方式进行排列。
如何获取父组件的约束信息？
可以使用 LayoutBuilder 来获取父组件的约束信息。
在 Flutter 中，Container 组件的表现取决于什么？
Container 组件的表现取决于是否有子组件和约束条件，若无子组件且无约束，则尽量充满可用空间。
