Flutter 布局相关知识

1. 约束类型
   在Flutter中，widget是由其底层的RenderBox渲染，渲染边界的约束（Constraints）由父级给出，widget在这些约束下调整自身尺寸。约束包括最小最大宽高，尺寸则是具体的宽高。

在Android中，布局的宽高限定有三种，match_parent、wrap_content以及具体尺寸。在Flutter中，也有这三种约束。

尽可能大的约束，例如Center、ListView等；

跟随内容大小的约束，例如Transform、Opacity等；

指定尺寸的约束，例如Image、Text等；

2. 一些具有设置尺寸的控件

① Container:
一个方便的小控件，结合常见的绘画，定位和尺寸的小控件。
属性包括:

alignment: 对齐方式
padding: 内边距
color: 颜色
decoration: 装饰
foregroundDecoration: 前置装饰
width: 宽度
height: 高度
constraints: 约束
margin: 外边距
transform: 转场方式
child: 子控件

② Padding
通过给定的填充来插入其子的小控件
属性包括：
padding: 内边距
child: 子控件

② Center
一个将子控件放置在自己内部中心的小控件。
属性包括:
widthFactor: 宽度系数
heightFactor: 高度系数
child: 子控件

说明: 宽度系数和高度系数是指Center的宽高是其子控件宽高的比率，例如heightFactor是2.0的话，那么Center的高度将是子控件高度的二倍。

④ AspectRatio
一个根据特定的长宽比来布局子控件的特殊控件
小控件首先尝试布局约束所允许的最大宽度。通过将给定的高宽比应用于宽度来确定小控件的高度，表示为宽度与高度的比率。 例如，16：9宽高比高宽比应为16.0 / 9.0。如果最大宽度是无限的，则通过将纵横比应用于最大高度来确定初始宽度。 现在考虑第二个示例，这次的宽高比为2.0，布局约束要求宽度在0.0到100.0之间，高度在0.0到100.0之间。我们将选择宽度100.0（允许的最大值）和高度50.0（以匹配宽高比）。 在这种情况下，如果宽高比为0.5，我们也会选择100.0的宽度（仍然是最大的宽度），我们将尝试使用200.0的高度。不幸的是，这违反了限制因素，因为子控件可能最多只有100.0像素。然后小控件将采用该值并再次应用宽高比以获得50.0的宽度。该宽度由约束条件允许，并且子节点的宽度为50.0，高度为100.0。如果宽度不被允许，小控件将继续遍历约束。如果在查询每个约束之后，小控件没有找到可行的大小，那么小控件将最终为满足布局约束但未能满足宽高比约束的子控件选择大小。
属性包括:
aspectRatio: 宽高比
child: 子控件

⑥ Offstage
一个可以控制其子控件显示或者隐藏的小控件
属性包括:
offstage: 是否隐藏
child: 子控件

⑦ SizedBox
一个具有特殊尺寸的控件
属性包括:
height: 高度
widht: 宽度
child: 子控件

⑧ Row Column

属性包括:

children: 子控件们
crossAxisAlignment: 子控件应该如何沿着横轴放置
direction: 主轴方向
mainAxisAlignment: 子控件应该如何沿着主轴放置
mainAxisSize: 主轴应该占据多少空间

mainAxisSize 决定row自身的宽度
它含有两个值，分别是max和min，默认为max
可选属性 含义
max 就像安卓里的match_parent ，尽可能的大
min 就像安卓里的wrap_content ，根据所有子项宽度的和来决定宽度

mainAxisAlignment 决定子项的对齐方式(主轴)，默认为start。
CrossAxisAlignment 决定子项的对齐方式(垂直于主轴的那个轴)，默认为start。

⑨ Stack
如果你想以一种简单的方式重叠几个子控件，这个类是有用的，例如有一些文本和图像，用渐变和按钮叠加

帧布局

属性包括:

alignment: 对齐方式
fit: 适应的方式
overflow: 是否修剪溢出的控件
textDirection: 文本方向，用于解决对齐的问题
children: 子控件们

参考：Flutter 中布局方式的简单介绍
Flutter常用widget ‘Row、Column’