布局类组件-线性布局(Row和Column)

所谓线性布局,即指沿水平或垂直方向排布子组件,Flutter中通过Row和Column来实现线性布局,类似与Android 中的LinearLayout.Row和Column都继承自Flex.

主轴和纵轴

对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向,在线性布局中,有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment,分别代表主轴对齐和纵轴对齐.

Row

Row可以在水平方向排列其子widget:

textDirection:表示水平方向子组件的布局顺序,默认是系统当前Local环境的文本方向.

mainAxisSize:表示Row在主轴方向所占用的空间,默认是MainAxisSize.max,此时无论子Widget实际占用了多少水平空间,Row的宽度始终等于水平方向的最大宽度,而MainAxisSize.min表示尽可能少的占用水平空间,Row的实际宽度等于所有子组件占用的水平空间.

mainAxisAlignment:表示子组件在Row所占用的水平空间内的对齐方式,当mainAxisSize的值为MainAxisSize.min时,此属性无效.MainAxisAlignment.start表示沿textDirection的初始方向对齐，如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中对齐。读者可以这么理解：textDirection是mainAxisAlignment的参考系.

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:子组件数组

Column

Column可以在垂直方向排列其子组件，参数和Raw一样，不同的是布局方向为垂直，主轴纵轴正好相反

由于我们没有指定Column的mainAxisSize，所以使用默认值MainAxisSize.max，则Column会在垂直方向占用尽可能多的空间。

指定了crossAxisAlignment属性为CrossAxisAlignment.center，那么子项在Column纵轴方向会居中对齐。注意，在水平方向对齐是有边界的，总宽度为Column占用空间的实际宽度，而实际宽度取决于子项中宽度最大的Widget。

Row和Colmun都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于它们最大子元素的长度

特殊

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有对最外面的Row或Column会占用尽可能大的空间，里面Row或者Column所占用的空间为实际大小，如果要让里面的Column沾满外部Column，可以使用Expanded组件