如何在颤振文本小部件内下划线文本?

我似乎无法在TextStyle的fontStyle属性内找到下划线


当前回答

例如

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),

其他回答

你可以通过应用decoration: TextDecoration来实现。下划线到文本的TextStyle。

主题示例:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

基本的例子:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

激动人心的解决方案 如果你想控制文本和下划线之间的距离,你可以使用这个方法。简而言之,使用Colors隐藏实际文本。然后在文本下划线上方显示偏移阴影。

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

正如你将在下面看到的,如果你使用框外文本下划线,它会粘在文本的底部,看起来有点难看,

无聊的解决方案

使用文本小部件,您可以添加自定义样式和颜色的下划线:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

我使用这种方法的唯一问题是,您无法控制下划线与文本底部的距离。

如果你想增加间距,你将不得不使用一种非常规的方法,使用容器和它的padding属性。

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

请关注这个GitHub问题,以获得更简单的解决方案。

另一个例子

child: Text.rich(
  TextSpan(
    text: 'By using our mobile app, you agree to our ',
    children: [
      TextSpan(
        text: 'Term of Use',
        style: TextStyle(
          decoration: TextDecoration.underline,
        )
      ),
      TextSpan(text: ' and '),
      TextSpan(
        text: 'Privacy Policy',
        style: TextStyle(
          decoration: TextDecoration.underline,
        )
      ),
    ]
  ),
),

输出:

或者,为了防止复杂性,您也可以使用Flutter Markdown https://pub.dev/packages/flutter_markdown

下面是一个简单的代码

Text(
  'Welcome to Flutter',
  style: TextStyle(decoration:TextDecoration.underline,),
),

您可以使用decorationStyle来定制它

Text(
  'Welcome to Flutter',
  style: TextStyle(
  fontSize: 24,
  decoration: TextDecoration.underline,
  decorationStyle: TextDecorationStyle.double,
  ),
),

以下是其他TextDecorationStyle值:

TextDecorationStyle.dashed TextDecorationStyle.dotted TextDecorationStyle.double TextDecorationStyle.wavy