在 Flutter 行中，有沒有辦法在使用 MainAxisAlignment.spaceBetween 時使孩子居中對齊？

Question

我有一個填充一個Container的Row ，它可能有一個到三個固定大小的孩子。 我正在使用MainAxisAlignment.spaceBetween ，當有多個孩子時，它按預期工作：有兩個孩子，他們最終在邊緣，如果有三個，兩個在邊緣，一個在中心。

Container(
  width: 200,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
        SizedBox(width: 30, height: 20),
        SizedBox(width: 30, height: 20),
        SizedBox(width: 30, height: 20),
    ],
  ),
);

但是，當只有一個孩子時，它會放在Row的開頭，我想把它放在中間。 我當然可以通過事先檢查孩子的數量並將MainAxisAlignment更改為center來實現我所需要的，但我想知道是否有更優雅的方式來結合spaceBetween和center 。

Answer 1

將crossAxisAlignment: CrossAxisAlignment.center,屬性添加到 Raw Widget：

編碼：

Container(
  width: 200,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
       SizedBox(width: 30, height: 20),
    SizedBox(width: 30, height: 20),
    SizedBox(width: 30, height: 20),
],
  ),
);

Answer 2

您可以使用MainAxisAlignment.spaceEvenly （或spaceAround ）將單個孩子居中。 要讓兩個孩子左右浮動（因為在spaceEvenly中左右會有多余的空格），可以將Spacer添加到Row的孩子（適用於任意數量的孩子）。

代碼：

  List<Widget> rowChildren = [
    SizedBox(width: 30, height: 20, child: Container(color: Colors.red)),
    SizedBox(width: 30, height: 20, child: Container(color: Colors.yellow)),
    SizedBox(width: 30, height: 20, child: Container(color: Colors.green)),
  ];

  @override
  void initState() {
    super.initState();
    int l = rowChildren.length;
    for (int i = 1; i < 2 * l - 1; i += 2) {
      rowChildren.insert(i, Spacer()); // adding Spacer between the two children
    }
  }

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: rowChildren
),

結果（一個孩子）：

結果（兩個孩子）：

結果（三個孩子）：