假设有人正在学习Flutter，他问你为什么有的width:100的widget宽度不是100像素，标准答案是让他将widget放在一个Center里面，对吗？

别这么做。

如果你这么回答他，他就会一次又一次跑回来问你新的问题，比如说为什么某些FittedBox无法正常工作，为什么那个Column溢出，或者IntrinsicWidth是用来做什么的，诸如此类。

这时候你应该告诉他：Flutter布局与HTML布局（他之前可能接触的就是后者）有着很大不同，然后让他记住以下规则：

约束（Constraints）在下面，大小（Sizes）在上面。位置（Positions）由父项（Parents）决定。

想要真正理解Flutter的布局，就得搞清楚上面这条规则，所以大家都应该尽早学会它。

具体来说：

widget从其父项获得自己的约束。一个“约束”是由4个double值组成的：分别是最小和最大宽度，以及最小和最大高度。
然后，widget会遍历自己的子项（children）列表。widget会逐个向每个子项告知它们的约束（各个子项的约束可以是不同的），然后询问每个子项想要设置的大小。
接下来，widget一个个确定子项的位置（在x轴上确定水平位置，在y轴上确定垂直位置）。
最后，widget将其自身大小告知父项（当然这个大小也要符合原始约束）。

例如，如果一个widget是一个带有一些padding的column，并且想要布局自己的两个子项：

Widget：你好父项，我的约束是什么？

父项：你的宽度必须在90到300像素之间，高度在30到85像素之间。

Widget：我想有5像素的padding，所以我的子项最多有290像素的宽度和75像素的高度。

Widget：你好第一个子项，你的宽度必须在0到290像素之间，高度在0到75像素之间。

第一个子项：好的，那么我希望自己的宽度是290像素，高度为20像素。

Widget：那么，因为我想将第二个子项放在第一个子项之下，因此第二个子项只剩下55像素的高度。

Widget：你好第二个子项，你的宽度必须介于0到290像素之间，并且高度必须介于0到55像素之间。

第二个子项：好吧，我希望宽度是140像素，高30像素。

Widget：很好。我将把第一个子项放在x: 5和y: 5的位置，将第二个子项放在x: 80和y: 25的位置。

Widget：你好父项，我决定将自己设为300像素宽和60像素高。

限制

因为上述布局规则的关系，Flutter的布局引擎有一些重要的限制：

一个widget只能在其父项赋予的约束内决定其自身的大小。这意味着widget往往不能自由决定自己的大小。
widget不知道，也无法确定自己在屏幕上的位置，因为它的位置是由父项决定的。
由于父项的大小和位置又取决于上一级父项，因此只有考虑整个树才能精确定义每个widget的大小和位置。

示例

可以运行这个DartPad来观察每个示例的效果。另外可以从这个GitHub存储库中获取最新代码。

示例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

Align(
   alignment: Alignment.bottomRight,
   child: Container(width: 100, height: 100, color: Colors.red),
)

这与前面的示例不同之处是使用了Align代替Center。

Align还告诉Container，后者的大小可以自由决定，但是如果有空白空间，它不会让Container居中，而是将其对齐到可用空间的右下角。

示例5

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

屏幕会强制将Center设置为与屏幕大小完全相同。因此Center将填满整个屏幕。

Center告诉Container，后者的大小不能超出屏幕。Container希望具有无限大的尺寸，但由于存在前述约束，因此它只能填满屏幕。

示例6

Center(child: Container(color: Colors.red))

屏幕会强制将Center设置为与屏幕大小完全相同。因此Center将填满整个屏幕。

Center告诉Container，后者的大小不能超出屏幕。由于Container没有子项且没有固定大小，因此它决定要尽可能变大，结果就填满了屏幕。

但为什么Container要这样决定呢？因为这是Container widget的创建者的设计决策。它也可能会有其他设计，所以你需要阅读Container的文档以了解它在不同情况下的行为方式。

示例7

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

屏幕会强制将Center设置为与屏幕大小完全相同。因此Center将填满整个屏幕。

Center告诉红色Container，后者的大小不能超出屏幕。由于红色Container没有大小，但有一个子项，因此它决定要与子项的大小相同。

红色的Container告知其子项，后者的大小不能超出屏幕。

这个子项恰好是一个绿色的Container，希望自己的大小是30×30。如上所述，红色的Container会将自己的大小设为子项的大小，因此它也会是30×30。结果红色是显示不出来的，因为绿色的Container会完全覆盖红色的Container。

示例8

Center(
   child: Container(
     color: Colors.red,
     padding: const EdgeInsets.all(20.0),
     child: Container(color: Colors.green, width: 30, height: 30),
   )
)

红色的Container会根据子项的大小设置自己的大小，但同时会考虑自己的padding。因此它将是70×70（=30×30加上各个面的20像素padding）。由于存在padding，因而红色将是可见的，绿色的Container的大小与上一个示例中的相同。

示例9

ConstrainedBox(
   constraints: BoxConstraints(
      minWidth: 70, 
      minHeight: 70,
      maxWidth: 150, 
      maxHeight: 150,
   ),
   child: Container(color: Colors.red, width: 10, height: 10),
)

你可能会以为Container会是70到150像素之间，但是你错了。ConstrainedBox只会在widget从父项获得的约束基础之上施加额外的约束。

在这里，屏幕将ConstrainedBox强制为与屏幕大小完全相同，因此它将告诉自己的子Container也不能超出屏幕大小，这样就忽略了它的constraints参数。

示例10

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70, 
         minHeight: 70,
         maxWidth: 150, 
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 10, height: 10),
   )    
)

现在，Center将允许ConstrainedBox的大小最大不能超出屏幕。ConstrainedBox将从其constraints参数中为其子项施加额外的约束。

因此，Container必须介于70到150像素之间。它希望自己是10个像素，所以结果会是70像素（最小约束值）。

示例11

Center(
  child: ConstrainedBox(
     constraints: BoxConstraints(
        minWidth: 70, 
        minHeight: 70,
        maxWidth: 150, 
        maxHeight: 150,
        ),
     child: Container(color: Colors.red, width: 1000, height: 1000),
  )  
)

Center将允许ConstrainedBox的大小最大不能超出屏幕。ConstrainedBox将从其constraints参数中为其子项施加额外的约束。

因此，Container必须介于70到150像素之间。它希望自己是1000个像素，所以最后会是150像素（最大约束值）。

示例12

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70, 
         minHeight: 70,
         maxWidth: 150, 
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 100, height: 100),
   ) 
)

Center将允许ConstrainedBox的大小最大不能超出屏幕。ConstrainedBox将从其constraints参数中为其子项施加额外的约束。

因此，Container必须介于70到150像素之间。它希望自己是100像素，结果就会是这个大小，因为这个值介于70到150之间。

示例13

UnconstrainedBox(
   child: Container(color: Colors.red, width: 20, height: 50),
)

屏幕强制UnconstrainedBox与屏幕大小完全相同。但是，UnconstrainedBox允许其Container子项自由设定大小。

示例14

UnconstrainedBox(
   child: Container(color: Colors.red, width: 4000, height: 50),
);

屏幕强制UnconstrainedBox与屏幕大小完全相同，UnconstrainedBox允许Container子项自由设定大小。

不幸的是，在这个例子中Container的宽度为4000像素，因为太大而无法容纳在UnconstrainedBox中，因此UnconstrainedBox将显示让人胆战心惊的“溢出警告”。

示例15

OverflowBox(
   minWidth: 0.0,
   minHeight: 0.0,
   maxWidth: double.infinity,
   maxHeight: double.infinity,   
   child: Container(color: Colors.red, width: 4000, height: 50),
);

屏幕强制OverflowBox与屏幕大小完全相同，并且OverflowBox允许Container子项自由设定大小。

这里的的OverflowBox与UnconstrainedBox相似，不同之处在于，如果子项超出了它的范围，它也不会显示任何警告。

在这个例子中下，Container的宽度为4000像素，因为太大而无法容纳在OverflowBox中，但是OverflowBox只会显示自己能显示的部分，而不会发出警告。

示例16

UnconstrainedBox(
   child: Container(
      color: Colors.red, 
      width: double.infinity, 
      height: 100,
   )
)

这不会渲染任何内容，并且你会在控制台中收到错误消息。

UnconstrainedBox允许其子项自由设定大小，但是其Container子项的大小是无限的。

Flutter无法渲染无限的大小，因此会显示以下错误消息：BoxConstraints forces an infinite width。

示例17

UnconstrainedBox(
   child: LimitedBox(
      maxWidth: 100,
      child: Container( 
         color: Colors.red,
         width: double.infinity, 
         height: 100,
      )
   )
)

这里你不会再遇到错误，因为当UnconstrainedBox为LimitedBox赋予一个无限的大小时，后者将向自己的子项传递100的宽度上限。

请注意，如果将UnconstrainedBox更改为Center widget，则LimitedBox就不会再应用自己的限制（因为其限制仅在约束为无限时才会应用），并且Container的宽度将被允许超过100。

这清楚表明了LimitedBox和ConstrainedBox之间的区别。

示例18

FittedBox(
   child: Text('Some Example Text.'),
)

屏幕强制FittedBox与屏幕大小完全相同。Text将有一些自然宽度（也称为其固有宽度），该宽度取决于文本的数量和字体大小等。

FittedBox将让Text自由设定大小，但是在Text将其大小告知FittedBox之后，FittedBox会对其进行缩放，使其填满可用宽度。

示例19

Center(
   child: FittedBox(
      child: Text('Some Example Text.'),
   )
)

但是，如果将FittedBox放在Center内会怎样？Center会让FittedBox的大小最大不能超出屏幕。

然后，FittedBox会将其自身调整为Text的大小，并让Text自由设定大小。由于FittedBox和Text的大小相同，因此不会发生缩放。

示例20

Center(
   child: FittedBox(
      child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.'),
   )
)

但是，如果FittedBox位于Center内部，但Text太大而超出了屏幕该怎么办？

FittedBox将尝试让自己和Text一样大，但它不能超出屏幕。然后，它会设定和屏幕大小一样的目标，并调整Text的大小以使其也适合屏幕。

示例21

Center(
   child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.'),
)

但是，如果我们移除FittedBox，则Text将从屏幕获得自己的最大宽度，并且会换行来适合屏幕宽度。

示例22

FittedBox(
   child: Container(
      height: 20.0, 
      width: double.infinity,
   )
)

注意FittedBox只能缩放有界的widget（宽度和高度都不是无限的）。否则，它将无法渲染任何内容，并且你会在控制台中收到错误消息。

示例23

Row(
   children:[
      Container(color: Colors.red, child: Text('Hello!')),
      Container(color: Colors.green, child: Text('Goodbye!)),
   ]
)

屏幕强制Row与屏幕大小完全相同。

就像UnconstrainedBox一样，Row不会对其子项施加任何约束，而是让它们自由设定大小。然后Row会将子项并排放置，并且空下剩余的空间。

示例24

Row(
   children:[
      Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.')),
      Container(color: Colors.green, child: Text('Goodbye!')),
   ]
)

由于Row不会对其子项施加任何约束，因此子项可能会太大而超出了可用的Row宽度。在这种情况下，就像UnconstrainedBox一样，Row将显示“溢出警告”。

示例25

Row(
   children:[
      Expanded(
         child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))
      ),
      Container(color: Colors.green, child: Text('Goodbye!')),
   ]
)

当一个Row子项包装在一个Expanded widget中时，Row将不再允许该子项定义自己的宽度。

相反，它将根据其他子项定义Expanded的宽度，只有这样Expanded widget才会强制原始子项的宽度与Expanded相同。

换句话说，一旦你使用了Expanded，原始子项的宽度就不重要了，并且将被忽略。

示例26

Row(
   children:[
      Expanded(
         child: Container(color: Colors.red, child: Text(‘This is a very long text that won’t fit the line.’)),
      ),
      Expanded(
         child: Container(color: Colors.green, child: Text(‘Goodbye!’),
      ),
   ]
)

如果所有Row子项都包装在Expanded widget中，则每个Expanded的大小将与其flex参数成比例，只有这样，每个Expanded widget才会强制其子项的宽度等于Expanded。

换句话说，Expanded会忽略其子项的首选宽度。

示例27

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

如果使用Flexible代替Expanded，则唯一的区别是Flexible将使其子项的宽度小于等于Flexible自身，而Expanded会强制其子项的宽度和Expanded完全相同。

但是，Expanded和Flexible在调整自己的大小时都会忽略自己子项的宽度。

请注意，这意味着我们无法按大小比例扩展Row子项。Row要么使用与子项相同的宽度，或者在使用Expanded或Flexible时完全忽略子项。

示例28

Scaffold(
   body: Container(
      color: blue,
      child: Column(
         children: [
            Text('Hello!'),
            Text('Goodbye!'),
         ]
      )))

屏幕会强制Scaffold与屏幕完全相同。因此Scaffold会填满屏幕。

Scaffold告诉Container，后者不能超出屏幕大小。

注意：当widget告诉其子项可以小于某个特定大小时，我们说该widget为其子项提供了“宽松”的约束。稍后会进一步说明。

示例29

Scaffold(
   body: SizedBox.expand(
      child: Container(
         color: blue,
         child: Column(
            children: [
               Text('Hello!'),
               Text('Goodbye!'),
            ],
         ))))

如果我们希望Scaffold的子项大小与Scaffold本身完全相同，则可以将其子项包装到一个SizedBox.expand中。

注意：当widget告诉其子项必须等于某个大小时，我们说该widget为其子项提供了“严格”的约束。

严格×宽松约束

我们经常听到某些约束是“严格”或“宽松”的说法，因此这里讲讲它们的含义。

严格的约束只提供了一种可能性：一个确定的大小。换句话说，严格约束的最大宽度等于其最小宽度，并且其最大高度等于最小高度。

转到Flutter的box.dart文件并搜索BoxConstraints构造器，你会发现以下内容：

BoxConstraints.tight(Size size)
   : minWidth = size.width,
     maxWidth = size.width,
     minHeight = size.height,
     maxHeight = size.height;

再次回顾上面的示例2，它告诉我们屏幕强制红色的Container与屏幕尺寸完全相同。当然，屏幕是将严格的约束传递给Container来实现这一点的。

另一方面，宽松的约束可设置最大宽度/高度，但允许widget自由取小于这个值的大小。换句话说，宽松约束的最小宽度/高度都等于零：

BoxConstraints.loose(Size size)
   : minWidth = 0.0,
     maxWidth = size.width,
     minHeight = 0.0,
     maxHeight = size.height;

重新查看示例3，它告诉我们：Center让红色的Container大小不能大于屏幕。Center将宽松的约束传递给Container来做到这一点。最终，Center的主要目的是将其从父项（屏幕）获得的严格约束转换为对其子项（Container）的宽松约束。

学习特定widget的布局规则

我们需要了解通用的布局规则，但光是这样这还不够。

每个widget在应用通用规则时都有很大的自由度，因此只看widget的名称是没法知道它会做什么事情的。

如果你只靠猜测的话可能会猜错。除非你已阅读过widget的文档或研究了其源代码，否则你无法知道widget的确切行为。

布局源码往往是很复杂的，因此最好去看它们的文档。但是如果你决定要研究布局的源码，则可以使用IDE的导航功能轻松找到它。

下面是一个示例：

在你的代码中找到一些Column，然后导航到其源代码（IntelliJ中按下Ctrl-B）。你将被带到basic.dart文件。由于Column扩展了Flex，因此请导航至Flex源代码（也位于basic.dart中）。
现在向下滚动，直到找到一个名为createRenderObject的方法。如你所见，此方法返回一个RenderFlex。这是和Column对应的渲染对象。现在导航到RenderFlex的源代码，IDE会带你进入flex.dart文件。
现在向下滚动，直到找到一个名为performLayout的方法。这就是为Column布局的方法。

非常感谢Simon Lightfoot校对本文，提供标题图片并为本文提供内容建议。

备注：本文已加入Flutter官方文档。

参考阅读：

https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2

创作场景

Flutter 初学者必读的高级布局规则