Text 添加下划线

如何给 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