Limboy
·
关于 Flutter Layout 你应该知道的
💡
原文中文，约5300字，阅读约需13分钟。
📝
内容提要
本文讨论了 Flutter 的布局系统，重点介绍了无界约束和有界约束的概念。详细讲解了 Flex、Container、Stack、Row 和 Column 等组件的行为及使用方法，强调在 Flex 组件中避免使用无界约束的重要性，并提供了正确设置和调整布局的建议。
🎯
关键要点
- Flutter 的布局系统中，无界约束（Unbounded Constraints）指的是在某个方向上没有大小限制，常见于 ScrollView、ListView 和 GridView。
- Flex 组件在有界约束下会尽量撑满空间，而在无界约束下会根据子组件的大小进行调整。
- Container 组件的表现取决于是否有子组件和约束条件，若无子组件且无约束，则尽量充满可用空间。
- Stack 组件允许在其上层放置其他组件，非定位子组件会根据 Stack 的对齐方式进行排列。
- Row 和 Column 组件是 Flex 组件，分别用于横向和纵向排列子组件，crossAxisAlignment 用于控制交叉轴的对齐方式。
- 在 Flex 组件中不应放置无界约束的组件，如在 Column 中放置 ListView 会导致错误，需设置 ListView 的 shrinkWrap=true。
- 在无界约束中设置 flex 值不应等于 0，否则会导致无法划分空间的错误。
- 使用 LayoutBuilder 可以获取父组件的约束信息，使用 MediaQuery 可以获取屏幕尺寸和设备信息。
❓
延伸问答
什么是无界约束（Unbounded Constraints）？
无界约束指的是在某个方向上没有大小限制，常见于 ScrollView、ListView 和 GridView。
在 Flutter 中，Flex 组件的行为是什么？
在有界约束下，Flex 组件会尽量撑满空间；在无界约束下，会根据子组件的大小进行调整。
如何在 Column 中使用 ListView？
在 Column 中使用 ListView 时，需要将 ListView 的 shrinkWrap 设置为 true，以避免无界约束错误。
Stack 组件的主要特点是什么？
Stack 组件允许在其上层放置其他组件，非定位子组件会根据 Stack 的对齐方式进行排列。
如何获取父组件的约束信息？
可以使用 LayoutBuilder 来获取父组件的约束信息。
在 Flutter 中，Container 组件的表现取决于什么？
Container 组件的表现取决于是否有子组件和约束条件，若无子组件且无约束，则尽量充满可用空间。
➡️
