Flutter：两侧子Row数量不等时如何让Text完全居中？

在Flutter的Row组件中，当右侧内部Row的子项数量多于左侧内部Row时，如何让显示“Hello”的Text组件完全居中，而非轻微左偏？从截图可见“Hello”存在左偏情况。我曾尝试使用Stack组件，但文本长度超出可用空间时，会与侧边的彩色Container组件重叠。当前使用的代码如下：

Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          Container(
            width: 45,
            height: 45,
            color: Colors.red,
          ),
        ],
      ),
      Text(
        "Hello",
        textAlign: TextAlign.center,
      ),
      Row(
        children: [
          Container(
            width: 45,
            height: 45,
            color: Colors.purple,
          ),
          Container(
            width: 45,
            height: 45,
            color: Colors.green,
          ),
        ],
      )
    ],
  ),
)

核心是让左右两侧的占位宽度保持一致，这样中间的Text就能自然居中，同时避免文本与侧边容器重叠。以下是几种可行方法：

方法1：用Expanded强制左右宽度相等 #

给左右两个内部Row分别套上Expanded并设置flex:1，让它们平分父容器的剩余空间，中间Text使用flex:0避免被拉伸，文本过长时会自动换行：

Center(
  child: Row(
    children: [
      Expanded(
        flex: 1,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.red,
            ),
          ],
        ),
      ),
      Expanded(
        flex: 0,
        child: Text(
          "Hello",
          textAlign: TextAlign.center,
        ),
      ),
      Expanded(
        flex: 1,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.purple,
            ),
            Container(
              width: 45,
              height: 45,
              color: Colors.green,
            ),
          ],
        ),
      ),
    ],
  ),
)

方法2：用SizedBox固定左右占位宽度 #

如果已知右侧Row的总宽度（比如这里两个Container总宽90），给左侧Row设置相同宽度的SizedBox占位，确保左右宽度一致：

Center(
  child: Row(
    children: [
      SizedBox(
        width: 90,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.red,
            ),
          ],
        ),
      ),
      const Text(
        "Hello",
        textAlign: TextAlign.center,
      ),
      Row(
        children: [
          Container(
            width: 45,
            height: 45,
            color: Colors.purple,
          ),
          Container(
            width: 45,
            height: 45,
            color: Colors.green,
          ),
        ],
      ),
    ],
  ),
)

方法3：用LayoutBuilder动态计算宽度 #

如果左右宽度不固定，通过LayoutBuilder获取父容器宽度，让左右两侧各占一半宽度，保证中间Text始终居中：

Center(
  child: LayoutBuilder(
    builder: (context, constraints) {
      final sideWidth = constraints.maxWidth / 2;
      return Row(
        children: [
          SizedBox(
            width: sideWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  width: 45,
                  height: 45,
                  color: Colors.red,
                ),
              ],
            ),
          ),
          const Text(
            "Hello",
            textAlign: TextAlign.center,
          ),
          SizedBox(
            width: sideWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  width: 45,
                  height: 45,
                  color: Colors.purple,
                ),
                Container(
                  width: 45,
                  height: 45,
                  color: Colors.green,
                ),
              ],
            ),
          ),
        ],
      );
    },
  ),
)

内容的提问来源于stack exchange，提问作者sudoExclamationExclamation