如何在 Flutter 中沿中间对齐具有不同大小的 TextSpan 子项？

Question

根据附加的图像，我有三个 TextSpan 子对象 - 中间的 TextSpan 对象的字体更大。

我希望所有三个 TextSpan 对象都以背景父对象为中心。

当字体大小相同时，它们沿中心水平对齐。但是，当我增加一个 TextSpan 的字体大小时，只有较大的文本对象保持居中，较小的两个字体落在较大字体的基础上）...

我尝试了不同的对齐属性，但无法解决。这可以用 TextSpan 文本完成吗？

谢谢！

    return Container(
      decoration: BoxDecoration(
        color: Colors.amber,
      ),
        alignment: Alignment.center,
        child: RichText(
          textAlign: TextAlign.center,
          text: TextSpan(
            children: [
              TextSpan(text: 'Let\s', style: TextStyle(
                fontSize: 30,
              )),
              TextSpan(text: '500', style: TextStyle(fontSize: 80), ),
              TextSpan(text: 'Words', style: TextStyle(
                fontSize: 30,
              )),
            ]
          ),
        )
        );

Answer 1

您可以使用WidgetSpans 来确保您的所有元素（文本与否）都垂直居中

Container(
  decoration: BoxDecoration(
    color: Colors.amber,
  ),
  alignment: Alignment.center,
  child: RichText(
    text: TextSpan(
      children: [
        buildCenteredTextSpan(text: 'Let\s', style: TextStyle(fontSize: 30)),
        buildCenteredTextSpan(text: '500', style: TextStyle(fontSize: 80)),
        buildCenteredTextSpan(text: 'Words', style: TextStyle(fontSize: 30)),
      ],
    ),
  ),
),

和buildCenteredTextSpan:

  WidgetSpan buildCenteredTextSpan({required String text, required TextStyle style}) {
    return WidgetSpan(
      alignment: PlaceholderAlignment.middle,
      child: Text(text, style: style),
    );
  }