Flutter中TextStyle的lineThrough删除线无法居中问题求助

问题场景 #

使用RichText展示不同字号的文本时，带删除线的小号文本删除线始终无法与大号文本居中对齐，调整字号或容器height属性均无效。原代码如下：

Container(
  alignment: Alignment.centerLeft,
  child: RichText(
    maxLines: 1,
    textAlign: TextAlign.center,
    text: TextSpan(
      children: [
        TextSpan(
          text: "$price€  ", style: const TextStyle(fontSize: 22)),
        startingPrice != price
            ? TextSpan(
                text: "$startingPrice€",
                style: TextStyle(
                    fontSize:19,
                    decoration: TextDecoration.lineThrough,))
            : const TextSpan()
      ]),
  )),

核心原因 #

RichText中不同字号的TextSpan默认基于字体基线对齐，而删除线的位置由字体自身的through基线决定，不同字号的字体基线位置存在差异，导致删除线无法和大号文本居中对齐。

解决方案 #

使用WidgetSpan包裹带删除线的小号文本，通过设置PlaceholderAlignment.middle强制垂直居中对齐，彻底解决删除线偏移问题：

Container(
  alignment: Alignment.centerLeft,
  child: RichText(
    maxLines: 1,
    textAlign: TextAlign.center,
    text: TextSpan(
      style: TextStyle(color: Colors.black), // 统一设置默认文本颜色
      children: [
        TextSpan(text: "$price€  ", style: const TextStyle(fontSize: 22)),
        startingPrice != price
            ? WidgetSpan(
                alignment: PlaceholderAlignment.middle, // 关键：垂直居中对齐
                child: Text(
                  "$startingPrice€",
                  style: TextStyle(
                    fontSize: 19,
                    decoration: TextDecoration.lineThrough,
                  ),
                ),
              )
            : const TextSpan()
      ],
    ),
  ),
)

补充方案（微调适用） #

如果仅需小幅调整删除线位置，也可通过Transform.translate手动偏移：

// 替换原带删除线的TextSpan为以下代码
WidgetSpan(
  child: Transform.translate(
    offset: const Offset(0, 2), // 根据实际情况调整Y轴偏移量
    child: Text(
      "$startingPrice€",
      style: TextStyle(
        fontSize: 19,
        decoration: TextDecoration.lineThrough,
      ),
    ),
  ),
)

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