如何在 flutter 中给文本加上下划线

你可以通过将decoration: TextDecoration.underline应用到Text的TextStyle来实现。

主题示例:

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

基本的例子:

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

当给所有东西加下划线时，你可以在文本小部件上设置一个TextStyle。

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

如果你只想强调文本的一部分，那么你需要使用Text.rich()(或RichText小部件)并将字符串分解为可以添加样式的textspan。

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:

你可以在样式中使用TextDecoration来强调给定的文本。

例如

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

例如

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

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

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

无聊的解决方案 < br >

仅使用文本小部件，就可以添加带有自定义样式和颜色的下划线:

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的问题，以获得一个更简单的解决方案。

在一行中控制文本和下划线之间的距离

在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,
);
}
}

扩展还允许控制下划线的颜色，厚度和风格，就像任何其他下划线装饰。看看一个更完整的例子。

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

下面是一个简单的代码

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

另一个例子

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