有没有办法在 Flutter 中使 Text 和 Underline 不同颜色？

Question

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

RichText、TextSpan 或 Text 似乎没有机会这样做。

这就是我要找的。

Answer 1

首先，您必须使用Material小部件，并在其中定义RichText 、 TextSpan和Text 。

在Material小部件中，您需要设置下划线颜色。

Material(
 child:RichText(),//input our need
);

Answer 2

您可以在 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)
  ))

Answer 3

您可以使用RichText实现此行为。

RichText(
  text: TextSpan(
    text: 'You should only use this app when it is safe and legal to do so. ',
    style: TextStyle(color: Colors.white),
    children: [
      TextSpan(
        text: 'Please read our ',
        style: TextStyle(
          color: Colors.white,
        ),
        children: [
          TextSpan(
            text: 'Privacy Policy',
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.yellow,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          )
        ],
      ),
    ],
  ),
);