如何居中对齐RichText/TextSpan文本块？

你遇到的问题是因为RichText的textAlign属性需要在组件宽度大于文本宽度时才会生效。如果RichText的父容器没有给它明确的宽度约束（比如直接放在无约束的Column里），文本会自动撑满可用宽度，这时textAlign看起来没作用。

下面给你两种可行的解决办法：

方法一：给RichText添加textAlign并设置宽度约束 #

直接给RichText加上textAlign: TextAlign.center，同时用SizedBox或其他容器给它设置宽度（比如占满父容器宽度），这样文本就会在指定宽度内居中：

SizedBox(
  width: double.infinity, // 让RichText占满父容器宽度
  child: RichText(
    textAlign: TextAlign.center, // 设置居中对齐
    text: const TextSpan(
      children: <TextSpan>[
        TextSpan(text: 'Hello '),
        TextSpan(
          text: 'Click here',
          style: TextStyle(color: Colors.blue, fontSize: 13),
          recognizer: TapGestureRecognizer()..onTap = () {},
        ),
        TextSpan(text: ' this is a test'),
      ],
    ),
  ),
)

方法二：用Center组件包裹RichText #

如果不需要让RichText占满宽度，只是单纯让文本块居中显示，直接用Center组件包裹整个RichText即可：

Center(
  child: RichText(
    text: const TextSpan(
      children: <TextSpan>[
        TextSpan(text: 'Hello '),
        TextSpan(
          text: 'Click here',
          style: TextStyle(color: Colors.blue, fontSize: 13),
          recognizer: TapGestureRecognizer()..onTap = () {},
        ),
        TextSpan(text: ' this is a test'),
      ],
    ),
  ),
)

这两种方法都能解决你的居中问题，根据你的布局需求选择即可。

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