一 . 布局类组件
- 布局类组件： 指直接或者间接继承或者包含 MultichildRenderObjectWidget 的Widget，他们一般都会有一个children 属性用于接收子Widget ，继承关键： Widget > RenderObjectWidget (RenderObjectWidget类中定义了创建、更新RenderObject的方法，子类必须实现他们) > (Leaf/SingleChild/MultiChild)RenderObjectWidget
- 在Flutter中，根据Widget是否需要包含子节点将Widget 为了三类，分别对应三种Element；分别如下 | Widget | 对应的Element | 用途| | LeafRenderObjectWidget | LeaRanderObjectElement | 叶子节点，用于没有子节点的Widget，通常基础组件都属于这一类 eg:Image | | SingleChildRenderObjectWidget | SingleChildRenderObectElement | 包含一个子Widget ， eg： ConstraineBox, DecoratedBox等 | | MultiChildRenderObectWidget | MultiChildRenderObectElement | 包含多个Widget, 一般都有一个Children 参数，接收一个Widget 数组 。 Eg: Row、 Column、 Stack等
二. 线性布局 （Row和 Column）
- 线性布局： 指通过沿着水平（Row）或者垂直方向（Column）方向排布子控件的组件；
- Row： 水平方向排列子Widget ；继承自Flex （弹性布局）
- 主要属性
- textDirection ：布局顺序，默认从左往右；
- maiAxisSize：占用空间，默认MainAxisSize.max 尽可能多的占用水平方向的空间；
- mainAxisAlignment: 表示子控件Row所占用的水平空间对内对齐方式；当mainAxisSize为MainAxisSize.min 最小的时候，此属性吴意义； 为Row布局时 只有为minAxisSize.max 才有意义；MainAsizAlignment.start 表示沿着初始方向对齐；
- verticalDirection: 表示Row的垂直方向，默认VerticalDirection.down 表示从上到下；
- crossAxisAlignment：表示纵轴方向的对齐方式
- children：子控件数组
三. 弹性布局（Flex 伸缩的)
- 弹性布局：允许子控件按照一定比例来分配父容器空间；主要通过Flex和Expanded来实现；
- Flex：组件可以沿着水平或者垂直方向排列子组件，Flex 继承自MultiChildRenderObjectWidget,对应的RenderObject为RenderFlex，RenderFlex里面实现了布局算法；
- Expanded ：按比例扩伸 Row Column 和Flex子组件所占用的空间；
四. 流式布局
- 流式布局：超出屏幕会自动折行的布局叫流式布局，Flutter中通过Wrap和Flow来支持流式布局；
- Wrap特有属性：
- Spacing: 主轴方向子widget的间距
- runSpacing： 纵轴方向间距
- runAlignment：纵轴方向的对齐方式
五. 层叠布局 Stack 、Positioned
- Stack : 堆叠 ；
- 主要属性：Alignment （此参数决定如何去对齐没有点位 没有使用 Positioned或者部分定位的子组件；
- Fit :此参数确定没有定位的子组件 如何去适应 Stack的大小， StackFit.loose 表示适应子组件的大小，StackFit.expand表示扩展到Stack的大小；
- Overflow: 此属性决定如何显示超出Stack显示空间的子组件。 值为 overflow.clip 超出裁剪 ； overflow。visible 则不会；
六. 对齐与相对定位 Align
- FractionalOffset ：继承自Alignment 坐标原点在左侧顶点 FractionalOffset坐标换算公式： 实际偏移 = （FractionalOffset.x * childWidth, FractionalOffset.y * childHeight）;
七 总结
Align 和Stack对比： 可以看到，Align和Stack/Positioned都可以用于指定子元素相对于父元素的偏移，但它们还是有两个主要区别：
- 定位参考系统不同；Stack/Positioned定位的的参考系可以是父容器矩形的四个顶点；而Align则需要先通过alignment 参数来确定坐标原点，不同的alignment会对应不同原点，最终的偏移是需要通过alignment的转换公式来计算出。
- Stack可以有多个子元素，并且子元素可以堆叠，而Align只能有一个子元素，不存在堆叠
