Flutter中如何将货币/单位符号设为数字左上方的上标？

你可以试试这两种更靠谱的方案，比WidgetSpan更容易控制对齐：

方案一：用RichText+TextSpan（纯文本方案） #

直接通过调整符号的字体大小和行高来实现上标，代码示例：

RichText(
  text: const TextSpan(
    style: TextStyle(color: Colors.black), // 统一文本颜色
    children: [
      TextSpan(
        text: '€',
        style: TextStyle(
          fontSize: 12, // 缩小符号字号
          height: 0.4, // 控制上标高度，值越小越靠上
          baseline: TextBaseline.alphabetic,
        ),
      ),
      TextSpan(
        text: '199',
        style: TextStyle(fontSize: 24), // 数值的正常字号
      ),
    ],
  ),
)

根据你实际使用的字体大小，微调fontSize和height参数就能精准对齐。

方案二：用Stack布局（更灵活的可视化控制） #

如果需要更自由的位置调整，用Stack+Positioned组合：

Stack(
  alignment: Alignment.topLeft,
  clipBehavior: Clip.none, // 允许符号超出Stack范围
  children: [
    const Text(
      '199',
      style: TextStyle(fontSize: 24),
    ),
    Positioned(
      left: 0,
      top: -6, // 负数让符号向上偏移
      child: const Text(
        '€',
        style: TextStyle(fontSize: 12),
      ),
    ),
  ],
)

这种方式可以直观通过top、left参数控制符号的位置，适合对布局精度要求高的场景。

为什么WidgetSpan不好用？ #

WidgetSpan的PlaceholderAlignment是基于占位符的基线对齐，更适合嵌入非文本Widget，对于纯文本上标，TextSpan的样式调整逻辑更贴合文本排版规则，更容易达到预期效果。

内容的提问来源于stack exchange，提问作者Lelouch D Dragneel