如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
当前回答
下面是一个简单的代码
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
其他回答
你可以通过应用decoration: TextDecoration来实现。下划线到文本的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参数是默认的样式,但是子列表包含后面有样式的(也可能是无样式的)文本。如果要从样式文本开始,可以为文本使用空字符串。
你也可以添加一个TextDecorationStyle来改变装饰的外观。下面是虚线:
Text(
'Hello world',
style: TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
)
和TextDecorationStyle.dotted:
和TextDecorationStyle.double:
和TextDecorationStyle.wavy:
风格:TextStyle ( 装饰:TextDecoration.underline, ),
另一个例子
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