Flutter中如何在Text组件内为文本添加下划线？

嘿，你找错地方啦！下划线的设置不在fontStyle里，而是在TextStyle的decoration属性中哦～下面给你详细讲讲几种在Flutter Text组件里添加下划线的方法：

你说得没错，fontStyle是用来控制字体斜体这类样式的，下划线属于文本装饰范畴，得靠TextStyle里的decoration系列属性来实现。

1. 基础下划线实现 #

这是最简单的方式，直接给decoration赋值TextDecoration.underline即可：

Text(
  "这是带有基础下划线的文本",
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

2. 自定义下划线样式 #

如果想要调整下划线的颜色、粗细或者样式（比如虚线、波浪线），可以搭配这几个属性：

Text(
  "这是自定义样式的下划线文本",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blueAccent, // 自定义下划线颜色
    decorationStyle: TextDecorationStyle.wavy, // 可选solid/dashed/dotted/wavy等样式
    decorationThickness: 2.5, // 下划线的粗细
  ),
)

3. 同时添加多种文本装饰 #

比如需要同时显示下划线和删除线，用TextDecoration.combine把多个装饰组合起来就行：

Text(
  "同时有下划线和删除线的文本",
  style: TextStyle(
    decoration: TextDecoration.combine([
      TextDecoration.underline,
      TextDecoration.lineThrough,
    ]),
  ),
)

4. 给局部文本添加下划线 #

如果只想给Text里的某一段内容加下划线，那就用RichText配合TextSpan来实现：

RichText(
  text: TextSpan(
    text: "这是",
    style: TextStyle(color: Colors.black87, fontSize: 16),
    children: [
      TextSpan(
        text: "带下划线",
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.red,
        ),
      ),
      TextSpan(text: "的局部文本内容"),
    ],
  ),
)

下次找下划线相关设置，记得直奔decoration系列属性哦～

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