如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
当前回答
或者,为了防止复杂性,您也可以使用Flutter Markdown https://pub.dev/packages/flutter_markdown
其他回答
风格:TextStyle ( 装饰:TextDecoration.underline, ),
你可以通过应用decoration: TextDecoration来实现。下划线到文本的TextStyle。
主题示例:
Text(
"text",
style: Theme
.of(context)
.accentTextTheme
.subhead
.copyWith(decoration: TextDecoration.underline),
)
基本的例子:
Text(
"text",
style: TextStyle(decoration: TextDecoration.underline),
)
或者,为了防止复杂性,您也可以使用Flutter Markdown https://pub.dev/packages/flutter_markdown
当给所有东西加下划线时,你可以在文本小部件上设置一个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参数是默认的样式,但是子列表包含后面有样式的(也可能是无样式的)文本。如果要从样式文本开始,可以为文本使用空字符串。
你也可以添加一个TextDecorationStyle来改变装饰的外观。下面是虚线:
Text(
'Hello world',
style: TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
)
和TextDecorationStyle.dotted:
和TextDecorationStyle.double:
和TextDecorationStyle.wavy:
在一行中控制文本和下划线之间的距离
在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,
);
}
}
扩展还允许控制下划线的颜色,厚度和风格,就像任何其他下划线装饰。看看这个达特pad中一个更完整的例子。
这仍然是一个hack,但它允许在等待Flutter团队修复时保持小部件树的代码干净。