线性布局-Row、Column&权重布局-Expanded

线性布局-Row、Column&权重布局-Expanded

线性布局-Row、Column

• 主轴、纵轴概念

在线性布局中有主轴和纵轴之分，如果当前是水平布局，那么主轴就是指水平方向，纵轴就是指垂直方向， 如果当前是垂直布局，那么主轴就是指垂直方向，纵轴就是指水平方向

mainAxisAlignment ：主轴对齐，设置child在Row中的对齐位置，用MainAxisAlignment来设置，这里有六种情况，我们分别解释一下（其中center、start、end比较简单就不展示效果了）

center：将所有的子节点都居中显示
start：将所有的子节点从开头开始显示，这个开头指的是Row的左上角
end: 将所有的子节点从结束开始显示，这个结束是指的是Row的右下角
spaceAround: 将所有的子节点平均分布在水平方向上，其中首尾的留白大小为其余留白的1/2，具体效果如下

spaceBetween: 展示的效果和spaceAround是一样的，差别在首尾的留白不存在了，效果如下

spaceEvenly: 展示的效果和spaceAround是一样的，差别在于首尾的留白与其他的留白宽度是一样的

mainAxisSize :最大化或者最小化的使用横向的空间（如果Row嵌套Row或者Column嵌套Column，那么设置的mainAxisSize:MainAxisSize.max中只有外层有效，内层无效）
CrossAxisAlignment : 纵轴对齐，与mainAxisAlignment类似，都是进行偏移的，他有几个参数

注意:使用baseline的时候一定要设置baseline，不然会报空

textDirection :这个参数是指文本是从左到右还是从右到左来展示，因为有的地区文字是从右向左读的
verticalDirection : 他有两种设置方式down和up，默认是down，这里是指子节点集摆放的顺序，down是正序，up是倒序，这里的正序在Row中就是指从左往右布局，对应的Column是从上往下布局，倒序反之

说明

这里我把Row与Column放到一起是因为他们都是继承同一个父类Flex，基本上所有的方法都父类中实现了，Row与Column中只是去设置了一下他的水平方向，可以直接看源码一目了然，所以我说我把他当作Linear Layout去理解了

注意：当子 View超过屏幕的时候会出现一个溢出警告，这个在界面上会体现出来的

权重布局-Expanded

权重布局，多个Expand的时候，将容器的空白区域按比例分配，这里我们可以参考LinearLayout的layout_weight进行权重分配，下面给出一个例子，一看便知，四个Expanded将Row的水平区域完全瓜分了，并且根据flex设置的权重比瓜分的，
Row(
children: [
  Expanded(child: Text(“111”),flex: 1,),
  Expanded(child: Text(“222”),flex: 2,),
  Expanded(child: Text(“333”),flex: 1,),
  Expanded(child: Text(“444”),flex: 3,),
],
)