Flutter布局Widget--弹性布局、线性布局、流式布局和层叠布局

前言

本文我们要介绍 Flutter 中布局 Widget，包括弹性布局、线性布局
流式布局和层叠布局。

一、弹性布局--Flex

Flex 类似 Android 中的 FlexboxLayout，和 Expanded 配合使用可以实现子Widget 按照一定比例来分配父容器空间。

使用：

Flex(
    direction: Axis.horizontal,
    children: [
      ...
    ],
)

其中direction：主轴的方向，是必选参数，它的类型是 Axis，有以下两种值：
（1）Axis.horizontal：主轴方向为水平方向，那么子Widget 就会沿水平方向排列，交叉方向是垂直方向。
（2）Axis.vertical：主轴方向为垂直方向，那么子Widget 就会沿垂直方向排列，交叉方向是水平方向。

Flex 的构造函数及参数说明

class Flex extends MultiChildRenderObjectWidget {
  Flex({
    Key key,
    @required this.direction,//必选；类型 Axis；主轴的方向
    this.mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget在主轴的对齐方式
    this.mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间，分为mix 和 max
    this.crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式
    this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序，分为rtl：从右到左 和 ltr：从左到右
    this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
    this.textBaseline,//可选；类型 TextBaseline；排列子Widget 时使用哪个基线
    List children = const [],//可选；类型 List< Widget>；Flex布局 里排列的内容
  }) : assert(direction != null),
       assert(mainAxisAlignment != null),
       assert(mainAxisSize != null),
       assert(crossAxisAlignment != null),
       assert(verticalDirection != null),
       assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null),
       super(key: key, children: children);
    ...
}

Flexible 与 Expanded
为了避免子Widget 在 Row、Column、Flex中超届，就可以使用 Flexible 和 Expanded，当子Widget 要超过主轴的大小时，会自动换行。其中 Expanded 是 Flexible 的子类。

Flexible(
    child: Text('内容'),
  )
//或
Expanded(
    child: Text('内容'),
  )

（1）Flexible 的构造函数及参数说明：

class Flexible extends ParentDataWidget {
  const Flexible({
    Key key,
    this.flex = 1, //可选；类型 int；此 Widget的弹性因子
    this.fit = FlexFit.loose,//可选；类型 FlexFit；如何分配弹性Widget在可用空间里的大小
    @required Widget child,//必选；类型 Widget；要显示的Widget
  }) : super(key: key, child: child);
  ...
}

（2）Expanded 的构造函数及参数说明：

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// expand to fill the available space in the main axis.
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

（3）Flexible 与 Expanded 的区别：
fit 参数不同，Expanded 用的是默认的，当还有剩余空间的时候，会占满剩余的全部空间。而 Flexible 用的是 FlexFit.loose，只占用自身大小的空间。
（4）flex 弹性系数：
当 flex 为0或null，则 child 是没有弹性的，称为非弹性子Widget，非弹性子Widget的大小就是其本身的大小，不会被扩展去占用多余的空间。
当 flex 大于0时，child 是有弹性的，称为弹性子Widget，首先会计算出第一步所有 flex 为0或null的子Widget 的大小，然后会按照弹性子Widget的flex占所有弹性子Widget的flex总和的比例分割主轴的空闲空间。

二、线性布局

Flutter 的线性布局和 Android 中的一样分为水平方向的线性布局Row和垂直方向的线性布局Column。

1. Row

使用：

Row(
  children: [
    Text("Hello Flutter"),
    Image.asset(
      "images/flutter.png",
      width: 200,
    )
  ],
)

Row 的构造函数及参数说明：

class Row extends Flex {
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget 在主轴的对齐方式
    MainAxisSize mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式
    TextDirection textDirection,//可选；类型TextDirection；表示子Widget在主轴方向上的布局参数
    VerticalDirection verticalDirection = VerticalDirection.down,//可选；类型VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
    TextBaseline textBaseline,//可选；类型TextBaseline；排列子Widget时使用哪个基线
    List children = const [],//可选；类型List< Widget>；Flex布局里排列的内容
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

2. Column

使用：

Column(
  children: [
    Text("Hello Flutter"),
    Image.asset(
      "images/flutter.png",
      width: 200,
    )
  ],
)

Column 的构造函数及参数说明：
和 Row 的参数一样

注意：如果 Row 嵌套 Row，或者 Column 嵌套 Column，那么只有最外面的 Row 或 Column 会占用尽可能大的空间，里面 Row 或 Column 所占用的空间为实际的大小。

三、流式布局--Wrap

页面元素的宽度可以按照屏幕分辨率进行适配调整，把超出屏幕显示范围的控件自动换行。

使用：

Wrap(
  direction: Axis.horizontal,
  children: [
    ...
  ]
)

代码示例：

import 'package:flutter/material.dart';

class WrapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'WrapWidget',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('WrapWidget'),
        ),
        body: Wrap(
          direction: Axis.horizontal,
          spacing: 10.0,
          runSpacing: 5.0,
          children: [
            new Chip(
                avatar: new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text('1'),
                ),
                label: new Text('AAAAAAAAAA')),
            new Chip(
                avatar: new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text('1'),
                ),
                label: new Text('BBBBB')),
            new Chip(
                avatar: new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text('1'),
                ),
                label: new Text('CCCCCCCCCCC')),
            new Chip(
                avatar: new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text('2'),
                ),
                label: new Text('DDDDDDDD')),
            new Chip(
                avatar: new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text('2'),
                ),
                label: new Text('EEEEEE')),
          ],
        ),
      ),
    );
  }
}

运行结果：
Wrap 的构造函数及参数说明：

class Wrap extends MultiChildRenderObjectWidget {
  Wrap({
    Key key,
    this.direction = Axis.horizontal,//可选；类型 Axis；主轴的方向，默认是 Axis.horizontal
    this.alignment = WrapAlignment.start,//可选；类型 WrapAlignment；子Widget在主轴上的对齐方式，默认值为WrapAlignment.start，和MainAxisAlignment的一样
    this.spacing = 0.0,//可选；类型 double；主轴的方向间距
    this.runAlignment = WrapAlignment.start,//可选；类型 WrapAlignment；Wrap 会自动换成或换列，runAlignment 就是每行或每列的对齐方式，如果主轴为水平方向，就是每行，如果主轴为竖直方向，就是每列，默认值为WrapAlignment.start，WrapAlignment 的值和 MainAxisAlignment 的一样
    this.runSpacing = 0.0,//可选；类型 double；每行或每列之间的间距，默认是0.0
    this.crossAxisAlignment = WrapCrossAlignment.start,//可选；类型 WrapCrossAlignment；子Widget 在交叉轴上的对齐方式，WrapCrossAligment.start,WrapCrossAligment的值和MainAxisAligment的一样
    this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序
    this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
    List children = const [],//可选；类型 List；Wrap布局里排序的内容
  }) : super(key: key, children: children);
  ...
}

四、层叠布局--Stack

Flutter 中的层叠布局类似 Android 中的 FrameLayout，其子Widget 会按照添加顺序确定显示层级，后面添加的会覆盖在前面添加的 Widget 上面。

使用：

Stack(
  children: [
    Image.asset(
      "images/flutter.png",
       width: 200,
       fit: BoxFit.cover,
    ),
    Text('Hello Flutter',style: TextStyle(fontSize: 50.0),),
  ],
)

Stack 的构造函数及参数说明：

class Stack extends MultiChildRenderObjectWidget {
  Stack({
    Key key,//可选；类型 Key；Widget的标识
    this.alignment = AlignmentDirectional.topStart,//可选；类型AlignmentDirectional
    this.fit = StackFit.loose,//可选；类型 StackFit；此参数用于决定 non-positioned 子Widget 如何去适应Stack的大小
    this.overflow = Overflow.clip,//可选；类型 Overflow；决定如何显示超出 Stack显示空间的子Widget
    List children = const [],//可选；类型 List；Stack布局里排序的内容
  }) : super(key: key, children: children);
  ...
}

（1）alignment 参数：
决定如何对齐 non-positioned 子Widget 和部分 position 子Widget，默认值为Alignment.topStart，部分 positioned 子Widget，在某一个轴上没有定义的，这个轴就使用 alignment 的值，比如left、right为横轴，left 和right 都没有定义，就是横轴没有定义，只要这两个一个有值，这个轴就算有值；top、bottom为纵轴，同理。

AlignmentDirectional 的值：
AlignmentDirectional.topStart：上边 start 对齐
AlignmentDirectional.topCenter：上边居中对齐
AlignmentDirectional.topEnd：上边 end 对齐
AlignmentDirectional.centerStart：中间 start 对齐
AlignmentDirectional.center：中间对齐
AlignmentDirectional.centerEnd：中间 end 对齐
AlignmentDirectional.bottomStart：下边 start 对齐
AlignmentDirectional.bottomCenter：下边居中对齐
AlignmentDirectional.bottomEnd：下边 end 对齐

（2）fit 参数：
用于决定 non-positioned 子Widget 如何去适应Stack的大小。

StackFit 的值：
StackFit.loose：使用子Widget 自身的大小
StackFit.expand：子Widget 扩伸到 Stack 的大小
StackFit.passthrough：Stack 的父Widget 的约束无修改的传递给 Stack 的子Widget

（3）overflow 参数：
决定如何显示超出 Stack显示空间的子Widget。

overflow 的值：
Overflow.visible：超出部分仍能看见
Overflow.clip：超出部分会被剪裁

Stack 的子Widget
为了确定子Widget 到父容器四个角的位置，Stack将子Widget 分为两类：positioned 子Widget 和 non-positioned 子Widget。
（1）Positioned
positioned 子Widget 是指被 Positioned 嵌套起来的 Widget，Positioned 可以控制子Widget 到父容器四个边的距离。

使用：

Stack(
          fit: StackFit.expand,
          children: [
            Positioned(
              left: 50,
              top: 100,
              child: Image.asset(
                "images/flutter.png",
                width: 200,
                fit: BoxFit.cover,
              ),
            ),
            Text('Hello Flutter'),
          ],
        ),

Positioned 的构造函数及参数说明：

class Positioned extends ParentDataWidget {
  const Positioned({
    Key key,//可选；类型 Key；Widget的标识
    this.left,//可选；类型 double；离Stack左边的距离
    this.top,//可选；类型 double；离Stack上边的距离
    this.right,//可选；类型 double；离Stack右边的距离
    this.bottom,//可选；类型 double；离Stack底边的距离
    this.width,//可选；类型 double；指定Widget的宽度
    this.height,//可选；类型 double；指定Widget的高度
    @required Widget child,
  }) : assert(left == null || right == null || width == null),
       assert(top == null || bottom == null || height == null),
       super(key: key, child: child);
    ...
}

注意：此处的width、height 是用于配合 left、top、right、bottom 来定位 Widget 的。并且在水平方向上，只能指定 left、right、width 三个属性中的两个，如果三个都指定就会报错；垂直方向同理。

（2）non-positioned子Widget
non-positioned 子Widget 就是不用 Positioned 嵌套起来的 Widget，non-positioned 子Widget 使用 Stack 设置的 alignment 来确定自己在父容器里的位置。