Flutter Spacer 灵活配置你的Row/Column

咱们平时在写 Row/Column 的时候，通常会配置一会儿widget 的排列方式。

默认排序方式

默认的排列方式有以下：

enum MainAxisAlignment {

  /// 将children放置在主轴的起点
  start,

  /// 将children放置在主轴的末尾
  end,

  /// 将children放置在主轴的中心
  center,

  /// 将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙
  spaceBetween,

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

  /// 将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child
  spaceEvenly,
}
复制代码

看图了解一下。

spaceBetween：

spaceAround：

spaceEvenly：

能够看到确实如咱们刚才所写的同样。

不规则排序

那若是这个时候我想实现以下效果，该怎么作？

一个小方块在最前面，两个小方块在后面。

这个时候就须要Spacer，那什么是Spacer，按照惯例来看官方文档：

Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column.

Spacer建立一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。
复制代码

接下来再看一下该类，肯定一下怎么使用：

class Spacer extends StatelessWidget {
  /// Creates a flexible space to insert into a [Flexible] widget.
  ///
  /// The [flex] parameter may not be null or less than one.
  const Spacer({Key key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);

  /// 用于肯定占用多少空间的弹性系数。
  /// 在放置不灵活的子对象后，根据子对象的弹性系数，将自由空间按比例分割，
  /// 从而肯定[间隔对象]在主轴中能够占用的空间量。默认为1。
  final int flex;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}
复制代码

能够看到，它其实就是包装了一个 Expanded 的 SizedBox 。

知道了原理之后咱们就能够灵活控制 Row/Column了。

示例以下：

body: Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Container(
        color: Colors.blue,
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 50,
        width: 50,
      ),
      Spacer(flex: 2), // 弹性系数为2
      Container(
        color: Colors.blue,
        height: 50,
        margin: EdgeInsets.symmetric(horizontal: 5),
        width: 50,
      ),
      Spacer(), // 弹性系数默认为1
      Container(
        color: Colors.blue,
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 50,
        width: 50,
      ),
    ],
  ),
)
复制代码

效果以下：

总结

其实Spacer 就是包装好的 Expanded，可是这样也简化了咱们不少的代码。

在 Flutter 中还有不少能简化咱们代码的地方。

关注我，天天分享 Flutter & Dart 相关知识。

完整代码已经传至GitHub：github.com/wanglu1209/…