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把文字设为透明,只保留实心删除线,这样就不会遮挡下层的文字 Stack用Alignment.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简单太多了,亲测好用,你赶紧试试吧!




