flutter线性布局
1.基本概念
对于线性布局,有主轴和纵轴之分,如果布局是沿水平方,那么主轴就是水平方向;如果布局沿垂直方向,那么主轴就是指垂直方向;在Flutter中通过Row和Column来实现线性布局;并且Row以及Column都是继承自Flex。
2.Row
Row表明在水平方向排列其子widget,因此此时主轴就是水平方向;纵轴就是垂直方向;Row的定义如下所示:
1 | Row({ |
构造函数中各个字段的意思:
- 1.textDirection:表示在水平方向上widget的布局顺序,注意一定是水平方向。
- 2.mainAxisSize:表示一个Row在水平方向所占用的空间,两个值可选,分别是mainAxisSize.min和mainAxisSize.max。
- 3.mainAxisAlignment:表示子Widgets在水平空间内的对齐方式;如果mainAxisSize的值为MainAxisSize.min的话,那么定义mainAxisAlignment的值将没有意义,因为子widget的宽度和Row的宽度是一样的。只有在mainAxisSize的值为mainAxisSize.max的时候,给mainAxisAlignment设置值才是可以接受的,假设textDirection的值为TextDirection.ltr的话,那么MainAxisAlignment.start表示左对齐;假设textDirection的值为TextDirection.rtl的话,那么设置MainAxisAlignment.end的话也是表明左对齐。当然还有mainAxisAlignment.center,这自然表明是居中了。
- 4.verticalDirection:表示Row的纵轴(垂直)的对齐方向,默认是VerticalDirection.down,表示从上到下。
- 5.crossAxisAlignment:表示子widget在纵轴方向的对齐方式,在线性布局里面,Row的高度等于子Widgets中最高的子元素高度。这个属性具有三个可选值,分别是start,end,center,不同的是它的参考系是verticalDirection。
- 6.children:子widget数组。
3.Column
Column表示在垂直方向进行排列,参数和Row类似,不同的就是Column表明的是垂直方向。
4.需要注意的地方
如果Row里面嵌套Row,或者Column里面嵌套Column,那么只有最外面的Row或者Column会占用尽可能大的空间,里面的Row和Column为其实际大小。