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的{{1}}。

使用主题示例：

Text

基本示例：

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

Answer 3

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

        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 issue，以寻求更简单的解决方案。

Answer 4

例如

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

Answer 5

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

例如

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

如何在颤动中加下划线

5 个答案: