Flutter布局（七）-Row、Column详解本⽂主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局⾏为以及使⽤场景，并对源码进⾏了分析。
1. Row
A widget that displays its children in a horizontal array.
1.1 简介
在Flutter中⾮常常见的⼀个多⼦节点控件，将children排列成⼀⾏。估计是借鉴了Web中Flex布局，所以很多属性和表现，都跟其相似。但是注意⼀点，⾃⾝不带滚动属性，如果超出了⼀⾏，在debug下⾯则会显⽰溢出的提⽰。
1.2 布局⾏为
Row的布局有六个步骤，这种布局表现来⾃Flex（Row和Column的⽗类）：
1. ⾸先按照不受限制的主轴（main axis）约束条件，对flex为null或者为0的child进⾏布局，然后按照交叉轴（ cross axis）的约束，对child
进⾏调整；
2. 按照不为空的flex值，将主轴⽅向上剩余的空间分成相应的⼏等分；
3. 对上述步骤flex值不为空的child，在交叉轴⽅向进⾏调整，在主轴⽅向使⽤最⼤约束条件，让其占满步骤2所分得的空间；
4. Flex交叉轴的范围取⾃⼦节点的最⼤交叉轴；
5. 主轴Flex的值是由mainAxisSize属性决定的，其中MainAxisSize可以取max、min以及具体的value值；
6. 每⼀个child的位置是由mainAxisAlignment以及crossAxisAlignment所决定。
Row的布局⾏为表⾯上看有这么多个步骤，其实也还算是简单，可以完全参照web中的Flex布局，包括主轴、交叉轴等概念。
Flex
center：将children放置在主轴的中⼼；
end：将children放置在主轴的末尾；
spaceAround：将主轴⽅向上的空⽩区域均分，使得children之间的空⽩区域相等，但是⾸尾child的空⽩区域为1/2；
spaceBetween：将主轴⽅向上的空⽩区域均分，使得children之间的空⽩区域相等，⾸尾child都靠近⾸尾，没有间隙；
spaceEvenly：将主轴⽅向上的空⽩区域均分，使得children之间的空⽩区域相等，包括⾸尾child；
start：将children放置在主轴的起点；
其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待⾸尾child的⽅式。其距离⾸尾的距离分别是空⽩区域的1/2、0、1。MainAxisSize：在主轴⽅向占有空间的值，默认是max。
MainAxisSize的取值有两种：
max：根据传⼊的布局约束条件，最⼤化主轴⽅向的可⽤空间；
min：与max相反，是最⼩化主轴⽅向的可⽤空间；
CrossAxisAlignment：children在交叉轴⽅向的对齐⽅式，与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下⼏种：
baseline：在交叉轴⽅向，使得children的baseline对齐；
center：children在交叉轴上居中展⽰；
end：children在交叉轴上末尾展⽰；
start：children在交叉轴上起点处展⽰；
stretch：让children填满交叉轴⽅向；
TextDirection：阿拉伯语系的兼容设置，⼀般⽆需处理。flex布局对齐方式
VerticalDirection：定义了children摆放顺序，默认是down。
VerticalDirection枚举值有两种：
down：从top到bottom进⾏布局；
up：从bottom到top进⾏布局。
top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。
TextBaseline：使⽤的TextBaseline的⽅式，有两种，前⾯已经介绍过。
1.5.2 源码
Row以及Column的源代码就⼀个构造函数，具体的实现全部在它们的⽗类Flex中。
关于Flex的构造函数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。