如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
如何在颤振文本小部件内下划线文本?
我似乎无法在TextStyle的fontStyle属性内找到下划线
当前回答
例如
Text(
"Terms and Condition",
style: TextStyle(
decoration:
TextDecoration.underline,
height: 1.5,
fontSize: 15,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto-Regular',
),
),
其他回答
你可以通过应用decoration: TextDecoration来实现。下划线到文本的TextStyle。
主题示例:
Text(
"text",
style: Theme
.of(context)
.accentTextTheme
.subhead
.copyWith(decoration: TextDecoration.underline),
)
基本的例子:
Text(
"text",
style: TextStyle(decoration: TextDecoration.underline),
)
激动人心的解决方案 如果你想控制文本和下划线之间的距离,你可以使用这个方法。简而言之,使用Colors隐藏实际文本。然后在文本下划线上方显示偏移阴影。
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(
"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问题,以获得更简单的解决方案。
另一个例子
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
下面是一个简单的代码
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