如何在颤动中加下划线

Question

如何在Text窗口小部件中加入文本下划线？

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

Answer 1

在为所有内容加下划线时,您可以在"文本"小部件上设置TextStyle.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

如果您只想为部分文本加下划线,那么您需要使用Text.rich()(或RichText小部件)并将字符串分解为可以添加样式的TextSpans.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan有点奇怪.该text参数是默认样式,但children列表包含其后面的样式化(可能没有样式)文本.text如果要从样式文本开始,可以使用空字符串.

您还可以添加TextDecorationStyle来更改装饰的外观.这是破灭的:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

并且TextDecorationStyle.dotted:

并且TextDecorationStyle.double:

并且TextDecorationStyle.wavy:

Answer 2

您可以通过应用做decoration: TextDecoration.underline对TextStyle的Text.

使用主题示例:

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

基本示例:

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

Answer 3

下面是一个简单的代码

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

Answer 4

令人兴奋的解决方案
如果你想控制文本和下划线之间的距离，你可以使用这个技巧。简而言之，您使用 Colors.transparent 隐藏实际文本，然后显示悬停在文本下划线上方的偏移阴影。

        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小部件，您就可以添加具有自定义样式和颜色的下划线：

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

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

如果你想增加间距，你必须使用一种非常规的方法，使用 Container 和它的 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 问题以获得更简单的解决方案。

Answer 5

另一个例子

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,
        )
      ),
    ]
  ),
),

输出：

Answer 6

控制一行文字与下划线之间的距离

此处以 Joe Muller 的答案为基础，提供了一种扩展方法，该方法允许控制文本/下划线距离，而不会弄乱小部件树的代码。它的使用方式如下：

Widget build(BuildContext context) {
  final myStyle = Theme.of(context).textTheme.headline4;

  return Text(
    'Hello, World!',
    //------------------------------------------------
    // simply apply the underlined method to the style
    style: myStyle?.underlined(distance: 2),
    //------------------------------------------------
  );
}

这是扩展：

extension TextStyleX on TextStyle {
  /// A method to underline a text with a customizable [distance] between the text
  /// and underline. The [color], [thickness] and [style] can be set
  /// as the decorations of a [TextStyle].
  TextStyle underlined({
    Color? color,
    double distance = 1,
    double thickness = 1,
    TextDecorationStyle style = TextDecorationStyle.solid,
  }) {
    return copyWith(
      shadows: [
        Shadow(
          color: this.color ?? Colors.black,
          offset: Offset(0, -distance),
        )
      ],
      color: Colors.transparent,
      decoration: TextDecoration.underline,
      decorationThickness: thickness,
      decorationColor: color ?? this.color,
      decorationStyle: style,
    );
  }
}

该扩展还允许控制下划线颜色、粗细和样式，就像任何其他下划线装饰一样。看看这个 DartPad 中更完整的示例。

它仍然是一个 hack，但它允许在等待 Flutter 团队修复时保持 widget 树的代码干净。

Answer 7

您可以在样式中使用 TextDecoration 为给定的文本添加下划线。

例如

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

Answer 8

例如

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