线性布局
- 所谓线性布局，即指沿水平或垂直方向排布子组件
- Row和Column都继承自Flex
- Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度。
例子：在contain内使用row，无论我们如何构建区域，在区域的最外面都会有一个大盒子将区域的所有内容包裹起来。在html里面我们使用div，在flutter里面，我们使用Container
在每个部件当中，肯定会有子节点，你要么是单个子节点，要么是多个子节点。
两个子节点分别使用child、children进行描述，column或者row就是Container的子节点。
注意：在没有子节点的基础，Container这个容器会尽可能放到最大，如果有子节点，那么，它将会变得足够的小。
Alignment
控制子元素在自身容器的位置
topLeft：靠左上角
则，Container沾满所有的父级区域
ROW
Row默认是占了container主轴方向最最大的距离。比如是水平方向，则它在水平方向占一行的区域
主轴方向对齐方式
对齐属性
mainAxisAlignment
向第一个元素对齐（默认）
向最后的一个元素对齐
居中对齐
除了以上的对齐方式，还支持css3flex属性两端对齐，左右两头靠左右
各个子元素的边距相等
两端的边距是子元素之间边距的1/2
垂直对齐方式
排列方位特点，是上中下
以中心点作为参考点
以顶部作为参考点
以底部作为参考点
排列顺序
一般是从左到右，可更改为从右到左
本来是从上到下，添加如下属性，则会变成从下到上
注意：
Row对齐属性失效原因：row没有设置为最大，如果是设置最小值，则不会有间距，没有间距，alignment可能会失效
Column垂直方向
使用场景：商品列表
宽度是由内容撑开，高度则撑满整个高度。
设置宽度为最小值
设置宽度占满一行
两端对齐
上下边距为子元素之间间距的1/2
所有间距都相等
以相反方向进行对齐
其他属性参考Row，在开发中，使用Row/Column比较多，因为他们是flex的子元素
参考列表
a). Row
- 主轴是水平方向
- 在水平方向如何排版
- textDirection：表示水平方向子组件的布局顺序(是从左往右还是从右往左)。
- mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是
- MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；而
- MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的的水平空间；
- mainAxisAlignment：表示子组件在Row所占用的水平空间内对齐方式，如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子组件的宽度等于Row的宽度。只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义，MainAxisAlignment.start表示沿textDirection的初始方向对齐，如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和
MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中对齐。
verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。
crossAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
children ：子组件数组。
b). Column
- 主轴是垂直方向
- 在垂直方向如何布局
- 属性和Row部件一致
弹性布局
- 弹性布局允许子组件按照一定比例来分配父容器空间。
- Flutter中的弹性布局主要通过Flex和Expanded来配合实现。
a) Flex
- 组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。
- Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。
Flex({
...
@required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
List<Widget> children = const <Widget>[],
})b). Expanded
- 可以按比例“伸缩” Row、Column和Flex子组件所占用的空间。
- flex参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间
const Expanded({
int flex = 1,
@required Widget child,
})流式布局
使用场景：首页导航按钮、瀑布流
- 在一些地方，如果子widget超出屏幕范围不会折行，则会报溢出错误
- 我们把超出屏幕显示范围会自动折行的布局称为流式布局
- Flutter中通过Wrap和Flow来支持流式布局,溢出会折行排版
- 属性基本和Flex（包括Row和Column）一致
- 我们一般很少会使用Flow，因为其过于复杂，需要自己实现子widget的位置转换，一般用Wrap满足需求。
- Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景
spacing：主轴方向子widget的间距
runSpacing：纵轴方向的间距
runAlignment：纵轴方向的对齐方式
使用场景：
使用row 如果宽度超过屏幕宽度，则会出现溢出错误
则这是，我们就会使用wrap
控制子元素之间的边距
spacing ：控制子元素之间的距离
主轴方向从左到右边
层叠布局(绝对定位)
stack父元素
positioned子元素
相对定位
