我如何在TextSpan中使用'vertical-align：super'

Question

我想在TextSpan上设置'vertical-align：super'。 我想要这样的结果：

Answer 1

另一个答案使用Unicode上标字符，但并非所有字符都具有上标版本。在这种情况下，您可以将WidgetSpan与Transform.translate一起使用。您必须调整fontSize和y-offset直到适合您的布局。

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Usage (m'),
      WidgetSpan(
        child: Transform.translate(
          offset: const Offset(0.0, -7.0),
          child: Text(
            '3',
            style: TextStyle(fontSize: 10),
          ),
        ),
      ),
      TextSpan(text: ')'),
    ],
  ),
)

Answer 2

链接的答案使用“行”和“文本”窗口小部件来实现此效果，但我需要使用RichText。实现此目的的一种方法是使用Unicode上标字符：

https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts

示例代码：

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Usage (m'),
      TextSpan(text: '³'),
      TextSpan(text: ')'),
    ],
  ),
)