如何在Flutter的Text组件中实现两行文本水平居中？

我尝试在圆形Container内创建Text组件，却卡在了让文本水平居中的步骤上。

当前使用的代码：

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
  color: Colors.red,
  borderRadius:
    const BorderRadius.all(
      Radius.circular(100.0),
    ),
  ),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Hello\nWorld',
        maxLines: 2,
      )
    ],
  ),
),

这段代码能将文本分成两行，但文本并未水平居中，效果如下：

问题核心是Text组件默认左对齐，即便Row把Text整体放在容器中间，Text内部的换行文字还是保持左对齐状态，以下两种方法可以解决：

方法1：给Text添加textAlign属性 #

直接在Text组件中设置textAlign: TextAlign.center，让文本的每一行都水平居中：

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: const BorderRadius.all(Radius.circular(100.0)),
  ),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Hello\nWorld',
        maxLines: 2,
        textAlign: TextAlign.center, // 添加该行实现文本内部居中
      )
    ],
  ),
),

方法2：用Center组件替代Row #

其实不需要嵌套Row，直接用Center作为Container的子组件，配合Text的居中对齐，代码更简洁：

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: const BorderRadius.all(Radius.circular(100.0)),
  ),
  child: const Center(
    child: Text(
      'Hello\nWorld',
      maxLines: 2,
      textAlign: TextAlign.center,
    ),
  ),
),

修改后，文本的每一行都会在圆形容器内水平居中显示。

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