You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Flutter中如何为文本同时设置点状下划线与实心删除线效果

Flutter中如何为文本同时设置点状下划线与实心删除线效果

哈哈,这个问题我之前也踩过坑!Flutter自带的TextDecoration确实有点不灵活,decorationStyle会同时作用于下划线和删除线,没法单独给它们设置不同样式。不过别愁,有个超简单的办法——用Stack把两个Text组件叠在一起就行!

核心思路就是让一个Text负责显示点状下划线,另一个负责显示实心删除线,叠在一起后视觉上就像是同一个文本同时拥有两种效果了,完全不用搞复杂的自定义绘制。

给你准备了现成的代码片段,直接复制就能用:

Stack(
  alignment: Alignment.center,
  children: [
    // 带点状下划线的文本
    Text(
      "这是测试的示例文本",
      style: TextStyle(
        fontSize: 16,
        color: Colors.black,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dotted,
        decorationColor: Colors.black,
      ),
    ),
    // 带实心删除线的文本
    Text(
      "这是测试的示例文本",
      style: TextStyle(
        fontSize: 16,
        color: Colors.transparent, // 文字透明,只留删除线
        decoration: TextDecoration.lineThrough,
        decorationStyle: TextDecorationStyle.solid,
        decorationColor: Colors.black,
      ),
    ),
  ],
)

简单说下关键细节:

  • 第一个Text保持正常文字颜色,只添加点状下划线
  • 第二个Text把文字设为透明,只保留实心删除线,这样就不会遮挡下层的文字
  • StackAlignment.center确保两个文本完全对齐,避免偏移

如果担心字体、行高这些细节导致对齐偏差,还可以把基础样式抽成变量,让两个Text共用,只修改差异部分,代码更整洁:

// 定义基础文本样式,统一字体、字号等
final baseStyle = TextStyle(
  fontSize: 16,
  color: Colors.black,
  fontFamily: "PingFang SC",
  height: 1.2,
);

Stack(
  alignment: Alignment.center,
  children: [
    Text(
      "这是测试的示例文本",
      style: baseStyle.copyWith(
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dotted,
        decorationColor: Colors.black,
      ),
    ),
    Text(
      "这是测试的示例文本",
      style: baseStyle.copyWith(
        color: Colors.transparent,
        decoration: TextDecoration.lineThrough,
        decorationStyle: TextDecorationStyle.solid,
        decorationColor: Colors.black,
      ),
    ),
  ],
)

这个方法比画盒子或者自定义Painter简单太多了,亲测好用,你赶紧试试吧!

火山引擎 最新活动