Flutter Row


简介

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