如何给 Text 添加下划线?
实际开发中我们可能需要给一些文字添加下划线,来表示一些特定的属性,Flutter 中添加下划线的方式非常简单。
解决方法
只需要设置 TextStyle 的 decoration 属性即可:
全部下划线
Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, ), )
效果如下:
部分下划线
如果只想要部分文字下划线,则需要搭配 Text.rich() 使用
Text.rich( TextSpan( text: 'Hello ', style: TextStyle(fontSize: 50), children: <TextSpan>[ TextSpan( text: 'world', style: TextStyle( decoration: TextDecoration.underline, )), // can add more TextSpans here... ], ), )
效果如下:
添加虚线
Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, ), )
效果如下:
其他样式
TextDecorationStyle.dotted TextDecorationStyle.double TextDecorationStyle.wavy