这是我参与2022首次更文挑战的第34天，活动详情查看：2022首次更文挑战
作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
深入理解 Flutter 布局约束 首先，
上层 widget 向下层 widget 传递约束条件；
然后，下层 widget 向上层 widget 传递大小信息。
最后，上层 widget 决定下层 widget 的位置。
更多细节：
- Widget 会通过它的 父级 获得自身的约束。约束实际上就是 4 个浮点类型的集合：最大/最小宽度，以及最大/最小高度。
- 然后，这个 widget 将会逐个遍历它的 children 列表。向子级传递 约束（子级之间的约束可能会有所不同），然后询问它的每一个子级需要用于布局的大小。
- 然后，这个 widget 就会对它子级的 children 逐个进行布局。（水平方向是
x轴，竖直是y轴） - 最后，widget 将会把它的大小信息向上传递至父 widget（包括其原始约束条件）。
了解如何为特定 widget 制定布局规则
掌握通用布局是非常重要的，但这还不够。
应用一般规则时，每个 widget 都具有很大的自由度，所以没有办法只看 widget 的名称就知道可能它长什么样。
如果你尝试推测，可能就会猜错。除非你已阅读 widget 的文档或研究了其源代码，否则你无法确切知道 widget 的行为。
布局源代码通常很复杂，因此阅读文档是更好的选择。但是当你在研究布局源代码时，可以使用 IDE 的导航功能轻松找到它。
下面是一个例子：
- 在你的代码中找到一个
Column并跟进到它的源代码。为此，请在 (Android Studio/IntelliJ) 中使用command+B（macOS）或control+B（Windows/Linux）。你将跳到basic.dart文件中。由于Column扩展了Flex，请导航至Flex源代码（也位于basic.dart中）。 - 向下滚动直到找到一个名为
createRenderObject()的方法。如你所见，此方法返回一个RenderFlex。它是Column的渲染对象，现在导航到flex.dart文件中的RenderFlex的源代码。 - 向下滚动，直到找到
performLayout()方法，由该方法执行列布局。
所以咋说呢，阅读源码绝对的成长最快的一种方式
参考
