使用Expanded(flex)时如何让Text()组件水平居中？

你现在的问题是：Row里左边用了flex:1的Expanded放关闭按钮，右边flex:4的Expanded里放文本，虽然文本在自己的区块里居中，但整个Row宽度按flex比例分成了5份（1+4），所以文本只会在右边4份范围内居中，看起来偏右。要保留Expanded和flex属性的同时让文本相对于整个Row居中，有两个靠谱的办法：

办法一：添加对称占位Expanded #

在Row末尾加一个flex:1的空Container，让整个Row的宽度按1（左按钮）+4（文本区）+1（占位）的比例分配，此时中间的文本区处于整个Row的对称位置，它的自然居中就是整体居中。修改后的代码如下：

Row(
  children: [
    Expanded(
      flex:1,
      child:TextButton(
        style: TextButton.styleFrom(
          alignment: Alignment.centerLeft,
        ),
        child: const Icon(
          Icons.close,
          color: MyStyle.textColor,
        ),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ),
    Expanded(
      flex:4,
      child: Container(
        alignment: Alignment.center,
        child: Text("to be center",style: MyText(myFontSize: 15).style()),
      )
    ),
    // 与左侧按钮区块flex比例一致的占位容器
    Expanded(flex:1, child: Container()),
  ],
),

办法二：使用Stack叠加布局 #

如果不想额外占用flex位置，可用Stack将原Row布局与文本分离：原Row保留原有flex结构用于左侧按钮的布局，文本直接在Stack层面居中，既保留了原Expanded的属性，又能实现文本整体居中。代码如下：

Stack(
  alignment: Alignment.center,
  children: [
    // 保留原Row的flex结构，右侧Expanded仅占位不显示内容
    Row(
      children: [
        Expanded(
          flex:1,
          child:TextButton(
            style: TextButton.styleFrom(
              alignment: Alignment.centerLeft,
            ),
            child: const Icon(
              Icons.close,
              color: MyStyle.textColor,
            ),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ),
        Expanded(flex:4, child: Container()),
      ],
    ),
    // 文本直接居中于整个Stack（即Row的完整宽度范围）
    Text("to be center",style: MyText(myFontSize: 15).style()),
  ],
),

这两种方法都无需手动调整Padding猜数值，能精准实现文本整体居中，且完全保留你原本的Expanded和flex属性。

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