Flutter 必须知道的布局规则

Flutter 必须知道的布局规则

很多人说布局不熟练，我建议是先去了解布局规则，我之前的文章有讲过。

今天看到一文写的很好，我做了翻译，时间关系没有润色太多，然后我也准备了视频做了解说，希望能帮到你。

原文 https://rohanjariwala03.medium.com/flutter-the-advanced-layout-rule-even-beginners-must-know-87eebb54cef6

前言

当学习 Flutter 的人问你为什么某个 widget 有宽度: 100 不是 100 像素宽，默认的答案是告诉他们把这个 widget 放在一个 center ，对不对？

别这样。

如果你这样做了，他们会一次又一次地问你为什么有些 FittedBox 不能工作，为什么那个 Column 会溢出，或者 IntrinsicWidth 应该做什么。

相反，首先告诉他们 Flutter 的布局与 HTML 的布局非常不同(这可能是他们来自哪里) ，然后让他们记住以下规则:

约束向下传递，尺寸向上传递，位置由父组件决定。

如果不知道这个规则，就不能真正理解 Flutter 布局，所以我相信每个人都应该尽早学习它。

细节:

• widget 从其父部件获得自己的约束。“约束”只是一组 4 个双精度: 最小和最大宽度，以及最小和最大高度。
• 然后， widget 遍历它自己的子列表。 widget 一个接一个地告诉它的子元素它们的约束条件是什么(每个子元素的约束条件可能不同) ，然后询问每个子元素它希望是什么大小。
• 然后， widget 将其子元素(水平放在 x 轴上，垂直放在 y 轴上)一个接一个地放置。
• 最后， widget 告诉它的父部件它自己的大小(当然是在原始约束内)。

例如，如果一个 widget 像一个带有一些填充的列，并且想要布局它的两个子元素:

widget - 嘿， parent ，我的约束条件是什么？

父级 - 像素宽度必须在 90 到 300 之间，身高必须在 30 到 85 之间。

Widget ー嗯，因为我想要有 5 个像素的填充，那么我的 child 最多可以有 290 个像素的宽度和 75 个像素的高度。

widget - 嘿，第一个 child ，你必须从 0 到 290 像素宽，0 到 75 高。

第一个 child - 好的，那么我希望是 290 像素宽，20 像素高。

Widget ー 嗯，因为我想把我的第二个 child 放在第一个 child 的下面，所以我的第二个 child 只有 55 像素的高度。

widget - 嘿，第二个 child ，你必须从 0 到 290 宽，0 到 55 高。

第二个 child - 好的，我希望是 140 像素宽，30 像素高。

widget ー 很好。我把第一个 child 放在 x: 5 和 y: 5 的位置，第二个 child 放在 x: 80 和 y: 25 的位置。

widget - 嘿， parent ，我已经决定我的尺寸是 300 像素宽，60 像素高。

Limitations 限制

由于上面描述的布局规则，Flutter 的布局引擎有一些重要的局限性:

• widget 只能在其父节点给它的约束范围内决定自己的大小。这意味着一个 widget 通常不能有它想要的任何大小。
• 一个 widget 不能知道也不能决定它自己在屏幕上的位置，因为决定 widget 位置的是 widget 的父部件。
• 由于父节点的大小和位置依次取决于它自己的父节点，因此如果不考虑整个树，就不可能精确地定义任何 widget 的大小和位置。

代码

https://github.com/ducafecat/flutter_layout_article

例子 1

Container(color: Colors.red)

屏幕是 Container 的父级。它强制红色 container 与屏幕大小完全相同。

所以 container 填满了屏幕，变成了红色。

例子 2

Container(width: 100, height: 100, color: Colors.red)

红色的 container 想要 100 × 100，但是它不能，因为屏幕强迫它和屏幕尺寸完全一样。

所以 container 填满了屏幕。

例子 3

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

屏幕强制 center 与屏幕大小完全相同，因此 center 填充了整个屏幕。

center 告诉 container 它可以是它想要的任何大小，但是不能大于屏幕。现在的 container 确实可以达到 100 × 100。

例子 4