Jetpack Compose中能否实现上划线文本（ā）？

由于原生TextDecoration没有提供上划线（overline）样式，你可以通过以下几种自定义方式实现：

1. 自定义CustomPaint绘制（最灵活） #

通过自定义绘制器在文本上方渲染线条，支持随文本样式动态调整线的颜色、粗细和间距：

class OverlineText extends StatelessWidget {
  final String text;
  final TextStyle style;
  final double lineOffset; // 上划线与文本顶部的间距

  const OverlineText({
    super.key,
    required this.text,
    this.style = const TextStyle(),
    this.lineOffset = 2.0,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _OverlinePainter(
        textStyle: style,
        lineOffset: lineOffset,
      ),
      child: Text(text, style: style),
    );
  }
}

class _OverlinePainter extends CustomPainter {
  final TextStyle textStyle;
  final double lineOffset;

  _OverlinePainter({required this.textStyle, required this.lineOffset});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = textStyle.color ?? Colors.black
      ..strokeWidth = (textStyle.fontSize ?? 14) * 0.08;

    // 计算线条Y轴位置：文本顶部向上偏移lineOffset
    final lineY = -lineOffset;
    canvas.drawLine(Offset(0, lineY), Offset(size.width, lineY), paint);
  }

  @override
  bool shouldRepaint(covariant _OverlinePainter oldDelegate) {
    return oldDelegate.textStyle != textStyle || oldDelegate.lineOffset != lineOffset;
  }
}

使用示例：

OverlineText(
  text: "带上线的示例文本",
  style: TextStyle(fontSize: 18, color: Colors.blueAccent),
  lineOffset: 3.0,
)

2. Stack叠加线条与文本（最简单） #

通过Stack将一个容器作为上划线叠加在文本上方，适合快速实现固定样式：

Stack(
  alignment: Alignment.topCenter,
  children: [
    // 上划线容器
    Container(
      height: 1.2,
      width: 150, // 固定宽度，或用LayoutBuilder动态获取文本宽度
      color: Colors.black,
      margin: EdgeInsets.only(bottom: 20), // 调整线与文本的间距
    ),
    Text(
      "快速实现上划线",
      style: TextStyle(fontSize: 16),
    ),
  ],
)

如果需要适配文本宽度，用LayoutBuilder包裹：

LayoutBuilder(
  builder: (context, constraints) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          height: 1.2,
          width: constraints.maxWidth,
          color: Colors.red,
          margin: EdgeInsets.only(bottom: 18),
        ),
        Text(
          "适配文本宽度的上划线",
          style: TextStyle(fontSize: 16),
          textAlign: TextAlign.center,
        ),
      ],
    );
  },
)

3. RichText结合WidgetSpan（适合局部文本） #

如果只需要给文本的某一部分加上划线，用RichText的WidgetSpan插入线条：

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Container(
          height: 1,
          width: 90,
          color: Colors.green,
          margin: EdgeInsets.only(bottom: 4),
        ),
        alignment: Alignment.topCenter,
      ),
      TextSpan(
        text: "局部文本上划线",
        style: TextStyle(fontSize: 16, color: Colors.black87),
      ),
    ],
  ),
  textAlign: TextAlign.center,
)

内容的提问来源于stack exchange，提问作者Packw