关于Flutter的那些事儿

作者：坚果

公众号："大前端之旅"

华为云享专家，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() 方法，由该方法执行列布局。