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/…