Flutter中设置mainAxisAlignment.center后内容仍无法居中，求助

问题原因 #

你设置的mainAxisAlignment: MainAxisAlignment.center是控制Row子组件的整体排列，但每个Text都被Expanded包裹——Expanded会强制占据Row的可用水平空间，三个Expanded把Row宽度分成了均等的三部分。此时Row的主轴居中对已经占满宽度的Expanded组件不起作用，真正需要调整的是每个Text在各自Expanded区域内的对齐方式。

解决方案 #

方案一：让每个Text在自身区域内居中 #

给每个Text组件添加textAlign: TextAlign.center属性，这样文本会在Expanded分配的空间内居中显示：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Text(
          documentSnapshot["name"],
          style: TextStyle(fontSize: 20),
          textAlign: TextAlign.center,
        ),
      ),
      Expanded(
        child: Text(
          documentSnapshot["description"],
          style: TextStyle(fontSize: 20),
          textAlign: TextAlign.center,
        ),
      ),
      Expanded(
        child: Text(
          documentSnapshot["tableNumber"].toString(),
          style: TextStyle(fontSize: 20),
          textAlign: TextAlign.center,
        ),
      ),
    ],
  ),

方案二：移除Expanded让文本整体居中 #

如果不需要三个文本强制均分Row的宽度，直接去掉Expanded，mainAxisAlignment: MainAxisAlignment.center就能让三个Text整体在Row中居中：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(documentSnapshot["name"], style: TextStyle(fontSize: 20)),
      SizedBox(width: 16), // 可选：添加文本间的间距
      Text(documentSnapshot["description"], style: TextStyle(fontSize: 20)),
      SizedBox(width: 16), // 可选：添加文本间的间距
      Text(documentSnapshot["tableNumber"].toString(), style: TextStyle(fontSize: 20)),
    ],
  ),

适用场景 #

• 方案一适合需要三个文本区域宽度均等，且各自内容居中的布局需求
• 方案二适合仅需要三个文本整体居中，不需要强制分配宽度的场景

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