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

Question

我想在TextSpan上设置'vertical-align: super'。我希望结果如下所示：

- user3242962

---

请查看以下链接，它可以准确回答您的问题：https://dev59.com/WlcP5IYBdhLWcg3wXIwy - Darshan

不是那个，因为我想在TextSpan上设置'vertical-align: super'而不是在Widget上。 - user3242962

可能是Flutter - 在容器中顶部对齐文本的重复问题。 - RhysD

Answer 1

另一个答案使用了Unicode上标字符，但并非所有字符都有上标版本。在这种情况下，您可以使用WidgetSpan和Transform.translate一起使用。您需要调整fontSize和y偏移量，直到适合您的布局。

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: ')'),
    ],
  ),
)

- Dread Boy

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: ')'),
    ],
  ),
)

- Dread Boy