Flutter开发：如何将文本下标改为上标？

方法1：修改现有Row结构快速实现 #

你原来用Row实现了下标，改成上标只需调整对齐方式，再给上标文本做一点偏移即可：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start, // 改为顶部对齐
  children: [
    Text(
      widget.weather.temp.round().toString(),
      style: TextStyle(
        color: Colors.white,
        fontSize: 150,
      ),
    ),
    Transform.translate(
      offset: Offset(0, -30), // 根据字体大小调整垂直偏移量
      child: Text(
        '°C',
        style: TextStyle(
          fontSize: 50.0,
          color: Colors.white,
        ),
      ),
    )
  ],
)

把CrossAxisAlignment.baseline换成CrossAxisAlignment.start让两个文本顶部对齐，再用Transform.translate将上标文本向上偏移，偏移量可根据实际字体大小自行调整，确保位置美观。

方法2：用Stack组件精准控制位置 #

如果需要更灵活的位置控制，Stack是更合适的选择，能自由定位上标：

Stack(
  alignment: Alignment.topRight,
  children: [
    Text(
      widget.weather.temp.round().toString(),
      style: TextStyle(
        color: Colors.white,
        fontSize: 150,
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(top: 15, left: 10), // 调整内边距控制位置
      child: Text(
        '°C',
        style: TextStyle(
          fontSize: 50.0,
          color: Colors.white,
        ),
      ),
    )
  ],
)

通过Stack的alignment: Alignment.topRight让上标对齐到主文本的右上角，再用Padding微调位置，适配不同字体尺寸。

方法3：用TextSpan内嵌上标（适合行内文本场景） #

如果上标是段落中的一部分，用TextSpan结合Transform的方式更优雅：

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: widget.weather.temp.round().toString(),
        style: TextStyle(
          color: Colors.white,
          fontSize: 150,
        ),
      ),
      WidgetSpan(
        child: Transform.translate(
          offset: Offset(0, -40),
          child: Text(
            '°C',
            style: TextStyle(
              fontSize: 50.0,
              color: Colors.white,
            ),
          ),
        ),
      ),
    ],
  ),
)

这种方式适合上标与主文本在同一行内的场景，比如段落中的公式、标注等。

内容的提问来源于stack exchange，提问作者Łukasz Strzelecki