[英]Is it possible to underline text with some height between text and underline line?
今天我正在尝试在 flutter 中制作sticker.ly 应用程序用户界面。 但我坚持在下划线和文本之间添加空格。 这是我的代码
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(13),
margin: MediaQuery.of(context).padding,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
SizedBox(width:8),
Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
SizedBox(width:8),
Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
],
),
],
),
),
],
),
);
}
}
在这里我想在underline
和Text('For You')
之间添加空格。 有没有办法以更好的方式做到这一点?
这是一个简单的hacky方法:
Text(
"Forgot Password?",
style: TextStyle(
shadows: [
Shadow(
color: Colors.red,
offset: Offset(0, -5))
],
color: Colors.transparent,
decoration:
TextDecoration.underline,
decorationColor: Colors.blue,
decorationThickness: 4,
decorationStyle:
TextDecorationStyle.dashed,
),
)
我写了一篇关于文本下划线和其他一些解决方案的文章,但这是我最喜欢的。
你可以尝试这样的事情:
Container(
padding: EdgeInsets.only(
bottom: 3, // This can be the space you need between text and underline
),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(
color: Colors.black,
width: 1.0, // This would be the width of the underline
))
),
child: Text(
"For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
,),)
经过多次尝试,我能够通过问题解决。 这是我的代码
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(13),
margin: MediaQuery.of(context).padding,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
SizedBox(width:8),
Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
SizedBox(width:8),
Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
],
),
Row(children: <Widget>[
Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
child: Container(
height: 3,
width: 52,
color: Colors.black,
),
),
],),
],
),
),
//search bar layout
Container(
child: Column(children: <Widget>[
],),
),
],
),
);
}
}
https的小改进版://stackoverflow.com/a/64839295/7683297
Text(
cohort.name,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle((
height: 1.5,
shadows: [
Shadow(
color: Colors.black,
offset: Offset(0, -5))
],
color: Colors.transparent,
decoration: TextDecoration.underline,
decorationColor: Colors.black,
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.