Flutter UI - Row、Column / 一行、一列

Row、Column 是 Flutter 中最常用的这布局 Weight 了。Row = 一行、Column = 一列，可以像 android 那样设置轻松的给宽高设置 match_parent、wrap_content、具体数值，还能设置权重百分比，甚至还拥有 android ConstraintLayout 约束布局 chain 那样约束 weight 在主方向上的排布，是 Flutter 最灵活的布局 Weight了，不会 Row、Column Flutter 你是寸步难行...

Row、Column 不仅要学通，更要学精

Row、Column 属性

Row、Column 同是继承自 Flex，除了方向子 view 不一样，其他一模一样，学一个就行了

 Row({
    Key key,
    // 主轴大小 
    MainAxisSize mainAxisSize = MainAxisSize.max,
    // 主轴对齐方式
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    // 交叉轴对齐方式
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    // 没用
    TextDirection textDirection,
    // 子 view 排序，支持正序和倒序
    VerticalDirection verticalDirection = VerticalDirection.down,
    // 基线对齐
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

Row、Column 使用 主轴，交叉轴 代替了 android 传统的 宽、高 概念

有意思的是 Row、Column 没有宽、高 的概念，只有主轴，交叉轴，这是为啥，还不是因为 Row、Column 他俩是有方向的，所有这么改了一下，其实本质还是宽、高换个称呼罢了

• Row - 横向排列子 view，主轴MainAxis = width，交叉轴CrossAxis = height
• Column - 纵向排列子 view，主轴MainAxis = height，交叉轴CrossAxis = width
  
  大家记住这个顺序就成了，但是蛋疼的地方就是 Row、Column 之能给主轴设置大小，交叉轴不行，这样实际有时候很麻烦，要再外面再套层容器才行

Row、Column 的 宽 高 设置不支持直接设置具体数值

Row、Column 只能支持下面2种宽、高设置：

• MainAxisSize.max = match_parent
• MainAxisSize.min = wrap_content

对的只能用 match_parent 或是 wrap_content，想要设置具体数值的宽高的话得再外面再用 Container 包一层

Row、Column 支持 chain 式样的 weight 排布

mainAxisAlignment 属性描述 、Column 里的 weight 排序，传统的 居中，靠左，靠右排序 就不说了，重点看下chain 链式排序，Flutter 支持3种：

• spaceEvenly - 平局分布 weight
• spaceAround - 首位的 weight 距离左右 2边的边距是其他 weight 边距的 1/2
• spaceBetween - 首位的 weight 距离左右 2边没有边距
  

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(),
      color: Colors.yellowAccent,
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text("spaceEvenly"),
          ARow(),
          Text("spaceAround"),
          BRow(),
          Text("spaceBetween"),
          CRow(),
        ],
      ),
    );
  }
}

class ARow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        AText(),
        AText(),
        AText(),
      ],
    );
  }
}

最后

其他的属性其实一般用不到，大家熟悉上面就行了，Row、Column 的缺点也不少：

• 最麻烦的就是不能同时设置宽高，只能设置一个，还不能设置具体数值，这的确是太蛋疼了，我们想要实现以前 match_parent、match_parent 的效果必须借助其他容器
• 不能换行，换列...

实际使用起来挺麻烦的，繁琐的，这也是 Flutter 的特色，UI写起来和 web 一样那一层套一层的...