Flutter中有没有办法让文本和下划线颜色不同？

Question

有没有办法让文本颜色为白色，而下划线为黄色？

RichText、TextSpan 或 Text 似乎没有机会执行此操作。

这就是我正在寻找的。

Answer 1

您可以在 Text 属性中使用decorationColor: yourColor 来更改下划线的颜色。例如，如果您想为所有文本添加下划线：

Text("Your text",
      style: TextStyle(
          color: Colors.white,
          decoration: TextDecoration.underline,
          decorationColor: Colors.yellow,
      ))

如果您只想为文本的一部分添加下划线，则必须将 RichText 与 TextSpan 结合使用。例如：

RichText(
   text: TextSpan(
   children: [
       TextSpan(
          text: "NOT UNDERLINED TEXT",
          style: TextStyle(
             color: Colors.white
          )
       ),
       TextSpan(
          text: "UNDERLINED TEXT",
          style: TextStyle(
             color: Colors.white,
             decoration: TextDecoration.underline,
             decorationThickness: 2,
             decorationStyle: TextDecorationStyle.wavy
          )
       )
  ], 
  style: TextStyle(color: Colors.yellow)
))