flutter线性布局

flutter

1.基本概念

对于线性布局，有主轴和纵轴之分，如果布局是沿水平方，那么主轴就是水平方向；如果布局沿垂直方向，那么主轴就是指垂直方向；在Flutter中通过Row和Column来实现线性布局；并且Row以及Column都是继承自Flex。

2.Row

Row表明在水平方向排列其子widget，因此此时主轴就是水平方向；纵轴就是垂直方向；Row的定义如下所示：

1
2
3
4
5
6
7
8
Row({
  TextDirection textDirection,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[]
});

构造函数中各个字段的意思：

  • 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为其实际大小。