[英]Is it possible to underline text with some height between text and underline line?
today I am trying to make sticker.ly app UI in a flutter.今天我正在尝试在 flutter 中制作sticker.ly 应用程序用户界面。 But I stuck in adding space between underline and text.
但我坚持在下划线和文本之间添加空格。 here is my code
这是我的代码
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),),
],
),
],
),
),
],
),
);
}
}
and here I want to add space between underline
and Text('For You')
.在这里我想在
underline
和Text('For You')
之间添加空格。 is there any way to do this in a much better way?有没有办法以更好的方式做到这一点?
Here's a simple hacky way to do it:这是一个简单的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,
),
)
I wrote an article about text underlining with a few other solutions but this is my favorite.我写了一篇关于文本下划线和其他一些解决方案的文章,但这是我最喜欢的。
You can try something like this:你可以尝试这样的事情:
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,)
,),)
after a lot of tries I am able to resolve by issue.经过多次尝试,我能够通过问题解决。 Here is my code
这是我的代码
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>[
],),
),
],
),
);
}
}
Little improved version of https://stackoverflow.com/a/64839295/7683297 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.