Flutter线性布局Row和Column

Flutter垂直和水平布局

所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中经过Row和Column来实现线性布局，相似于Android中的LinearLayout控件。

主轴和纵轴（MainAxis & CrossAxis）

对于线性布局，有主轴和纵轴之分，若是布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；若是布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，MainAxisAlignment和CrossAxisAlignment，分别表明主轴对齐和纵轴对齐。线性布局默认尽量多的占用主轴空间。默认是MainAxisSize.max，效果相似于Android布局中的match_parent，而MainAxisSize.min表示尽量少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于全部子组件占用的的水平空间，效果相似于Android中的wrap_content； 须要注意的是：Row中主轴方向为水平方向，Column中的主轴方向为垂直方向，如图：

Row和Column的基本使用和效果以下：

new Row(
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),

new Column(
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),
复制代码

效果如图：

其中Row的宽度和Column为填充父控件剩余全部空间。

布局方向

textDirection表示子组件在水平方向的布局顺序(是从左往右仍是从右往左)，默认为：TextDirection.ltr从左向右。在Column中使用此属性没有任何效果。对应效果分别为：

verticalDirection：表示纵轴的对齐方向，默认是VerticalDirection.down，表示从上到下。在Column中效果以下

而在 Row中则能够用改属性设置字组件头部对齐或者底部对齐，但通常采用 crossAxisAlignment属性进行设置。

对齐方式

MainAxisAlignment

mainAxisAlignment表示子组件在主轴方向上的对齐方式，若是mainAxisSize值为MainAxisSize.min，则此属性无心义，由于子组件的宽度等于Row的宽度。 对齐方式有start、end、center、spaceBetween、spaceAround、spaceEvenly。对应的效果分别为：

start和end

表示沿主轴初始方向，默认为这种效果，子组件布局方向沿着textDirection设定的布局方向，和start表示逆主轴初始方向，子组件布局方向逆着textDirection设定的布局方向，效果如图：

center

center表示尽量的将子组件靠近中间排列。效果如图：

spaceBetween、spaceAround和spaceEvenly

spaceBetween表示在子组件之间均匀的添加空白区域，让每一个组件和相邻的组件都有相同的间距，但首尾组件与父组件没有间隙。 spaceAround表示在子组件之间均匀的添加空白区域，让每一个组件和相邻的组件都有相同的间距，可是首尾距离父边界的距离为间距的一半。 spaceEvenly表示在子组件之间均匀的添加空白区域，让每一个组件和相邻的组件都有相同的间距，可是首尾距离父边界的距离和间距同样。 效果如图：

以 MainAxisAlignment.center为例，其使用方法为：

new Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),
复制代码

CrossAxisAlignment

CrossAxisAlignment表示子组件在纵轴方向上的对齐方式。对齐方式有：start、end、center、stretch、baseline。

start和end

start和end是一对相反的对齐方式，在未设置verticalDirection属性时（默认VerticalDirection.down），start表示顶部对齐，end表示底部对齐。而当verticalDirection为VerticalDirection.up时，start表示底部对齐，end表示顶部对齐。效果以下图：

stretch和baseline

stretch表示子组件填满纵轴方向。 baseline表示沿横轴放置子级,以便其基线匹配，若是主轴是垂直的，那么它的效果和start同样。

特殊状况

若是Row里面嵌套Row，或者Column里面再嵌套Column，那么只有对最外面的Row或Column会占用尽量大的空间，里面Row或Column所占用的空间为实际大小。

默认属性

经过阅读Row和Column的源码，能够了解到它们的默认属性：

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
  
  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
复制代码

归纳以下：

属性	默认值
mainAxisAlignment	start
mainAxisSize	max
crossAxisAlignment	center
verticalDirection	down

总结

了解了Flutter线性布局以后，不难发现，其设计思想和使用方式都和React及其相似，建议将两者放在一块儿对比学习。 附上React相关知识连接：

React Flexbox布局

CSS3 Flexbox 口诀