Flutter组件——Row，Column

Row

Row组件是一种很常见的布局组件，顾名思义就是水平一行的组件。它将里面的子组件排成一行，如果其子组件超出一行的范围，那么会报错。

• mainAxisAlignment

  Row组件分为两个方向，分别是主轴和副轴。mainAxisAlignment是控制子组件在主轴方向上的排列方式的。它接受一个MainAxisAlignment对象。

  • center 设置主轴中心

  • end 放在主轴末尾

  • spaceAround 将主轴方向上的空白区域均分，使children之间的空白区域相等，但是首尾child的空白区域为1/2

  • spaceBetween 和spaceAround差不多，但是首尾children没有空隙

  • spaceEvenly 是children空白区域相等包括首尾部分。

• mainAxisSize

  它接受一个MainAxisAlignment对象，它决定了主轴方向上占有空间的值，默认是max。max是最大化主轴方向的可用空间，min则相反。

• crossAxisAlignment

  它接受一个CrossAxisAlignment对象，控制的是在副轴上子元素排列的方式，其中有end，start，center等。

• verticalDirection

  它接受一个VerticalDirection对象，定义了children的摆放顺序(我也不是很了解)。

  Row的构造函数源码

    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

了解了Row组件之后Column组件就非常简单了，字面理解Column组件就是控制纵向的布局组件，其属性和Row非常类似，我们可以直接看构造方法的源代码

  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,
);