有沒有辦法在 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,
            ),
          )
        ],
      ),
    ],
  ),
);