简介

Row 是一个将其child显示在水平数组的widget

将其child填充可用的横向水平空间，一行高度是childs的最大高度（即：总是满足传入的垂直约束）
如果你只有一个child，只需要考虑使用对其或者中间位置，如果多个child，注意扩展水平空间(Expanded)，可以将child封装在一个扩展部件里面
当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间空间将没有任何空间可供扩展。

基本用法

水平布局，设置位置对齐方式

mainAxisSize 属性

一行的高度是有mainAxisSize属性控制，默认是max

mainAxisAlignment属性

将children放置在主轴某位置

CrossAxisAlignment 属性

crossAxisAlignment: crossAxisAlignment.center/end/start,
即，根据设定的位置交叉对齐

实例演示

class RowMainAxisAlignment extends StatelessWidget {
  ///> mainAxisAlignment属性
  /// - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
  ///  - spaceEvenly：将主轴方向空白区域均分，使得children之间空间相等，包括首尾childre
  ///  - spaceAround：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre的空白部分为一半
  ///  - spaceBetween：将主轴方向空白区域均分，使得children之间空间相等，但是首尾childre靠近收尾，没有空细逢
  ///  - MainAxisAlignment.start/end/center,
  ///  - start：将children放置在主轴起点方向
  ///  - end：将children放置在主轴末尾方向
  ///  - center：将children放置在主轴中间方向

  final MainAxisAlignment status;

  /// > CrossAxisAlignment 属性
  ///   -  crossAxisAlignment: CrossAxisAlignment.center/end/start,
  ///   - 即，根据设定的位置交叉对齐
  ///   - center/end/start: children在交叉轴上居中/末端/起点 对齐展示
  ///   - stretch：让children填满交叉轴方向
  ///   - baseline：在交叉轴方向，使得于这个baseline对齐，如果主轴是垂直的，那么这个值是当作开始

  final CrossAxisAlignment crossStatus;

  const RowMainAxisAlignment(this.status, this.crossStatus) : super();

  @override
  Widget build(BuildContext context) {
    return  Row(
      mainAxisAlignment: status,
      children: <Widget>[
        Container(
          color: Color(0xfffce4ec),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff8bbd0),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff48fb1),
          width: 90.0,
          height: 50.0,
        ),
      ],
    );
  }
}

class RowLayoutCreate extends StatelessWidget {
  const RowLayoutCreate() : super();

  @override
  Widget build(BuildContext context) {
    return  Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          margin:  EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Color(0xfffce4ec),
          width: 60.0,
          height: 50.0,
        ),
        Container(
          margin:  EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Color(0xfff8bbd0),
          width: 60.0,
          height: 50.0,
        ),
        Container(
          margin:  EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Color(0xfff48fb1),
          width: 60.0,
          height: 50.0,
        ),
        Container(
          margin:  EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Color(0xfff06292),
          width: 60.0,
          height: 50.0,
        ),
      ],
    );
  }
}