Flutter中RichText与TextSpan多行文本无法始终居中对齐问题求助

解决方法 #

你需要给RichText组件显式指定textAlign属性为TextAlign.center，如果需要整个文本块在父容器内水平居中，可在外层嵌套Center组件，修改后的示例代码如下：

Center(
  child: RichText(
    // 核心配置：指定内部文本每行都居中对齐
    textAlign: TextAlign.center,
    text: TextSpan(children: [
      TextSpan(
          text: 'flutterABC',
          style: TextStyle(
              fontSize: isDesktop(context) ? 64 : 32,
              fontWeight: FontWeight.w800)),
      TextSpan(
          text: 'flutterABC',
          style: TextStyle(
              fontSize: isDesktop(context) ? 64 : 32,
              fontWeight: FontWeight.w800,
              color: Colors.indigo))
    ]),
  ),
)

原因说明 #

RichText的textAlign属性默认值为TextAlign.left，未显式配置时，单行状态下RichText宽度与内容宽度一致，若父容器为居中布局会看起来是居中效果；多行状态下RichText宽度撑满父容器，内部文本就会按默认规则左对齐。显式指定textAlign: TextAlign.center即可保证无论单行、多行，内部所有文本行都居中对齐。

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