Flutter中如何让Text组件内容实现垂直和水平居中？

嘿，我来帮你搞定这个问题！你提到Android里TextView用gravity属性实现内容居中，在Flutter里其实有对应的实现方式，而且根据场景不同，方法也不一样，我给你详细拆解：

1. 先搞懂核心差异：Text的默认特性 #

Flutter的Text组件默认是包裹内容的——它的宽高刚好适配文本长度，这时候直接设置居中可能看不出效果，得先给它足够的空间，或者让它在固定尺寸的容器里布局。

2. 水平居中：用textAlign属性 #

当Text有多余宽度（比如父容器给了固定宽度，或者文本换行后有剩余空间），直接设置textAlign: TextAlign.center就能让文本水平居中，这对应Android里的gravity="center_horizontal"：

Container(
  width: 200, // 给固定宽度，让Text有多余空间展示居中效果
  child: Text(
    "test",
    textAlign: TextAlign.center,
  ),
)

3. 垂直+水平同时居中：结合容器对齐 #

如果要让文本在固定大小的区域里同时垂直、水平居中，最常用的是下面两种方法：

方法一：Container + alignment（最直观） #

用Container包裹Text，设置alignment: Alignment.center，就能让Text组件在容器里完全居中——因为Text默认包裹内容，所以文本自然就在容器中心了，完美对应Android的gravity="center"：

Container(
  width: 200,
  height: 100,
  color: Colors.grey[200], // 加背景色方便看效果
  alignment: Alignment.center,
  child: Text("test"),
)

方法二：Center组件 + 固定尺寸父容器 #

如果你习惯用Center组件，也可以给Center套一个固定尺寸的父容器，效果和上面一致：

SizedBox(
  width: 200,
  height: 100,
  color: Colors.grey[200],
  child: Center(
    child: Text("test"),
  ),
)

4. 多行文本的居中处理 #

如果是多行文本，想要每一行都水平居中，同时整个文本块在容器里垂直居中，只需要把textAlign: TextAlign.center和容器的alignment结合起来就行：

Container(
  width: 200,
  height: 150,
  color: Colors.grey[200],
  alignment: Alignment.center,
  child: Text(
    "这是多行文本示例\n第二行内容\n第三行内容",
    textAlign: TextAlign.center,
  ),
)

小提示 #

如果你的Text需要占满整个容器空间（比如设置了maxLines），textAlign: TextAlign.center负责水平居中，再配合容器的alignment或者文本行高（style: TextStyle(height: ...)）实现垂直居中，但前者的方式更简洁可靠。

内容的提问来源于stack exchange，提问作者jeroen-meijer