flutter 是否可以在文本和下划线之间添加一定高度的下划线?

31moq8wy  于 2022-12-14  发布在  Flutter
关注(0)|答案(5)|浏览(405)

今天,我尝试着制作sticker.ly应用程序的用户界面。2但是我在下划线和文本之间添加了空格。3下面是我的代码

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),),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这里我想在underlineText('For You')之间添加空格。有没有更好的方法?

v64noz0r

v64noz0r1#

这里有一个简单的黑客方法来做到这一点:

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,
            ),
          )

我写了一个关于文本下划线的article和其他一些解决方案,但这是我最喜欢的。

1cosmwyk

1cosmwyk2#

您可以尝试以下操作:

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,)
  ,),)
qvsjd97n

qvsjd97n3#

经过多次尝试,我能够解决的问题。这是我的代码

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>[

            ],),
          ),
        ],
      ),
    );
  }
}
gkl3eglg

gkl3eglg4#

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,
                                    ),
ozxc1zmp

ozxc1zmp5#

下面是我的非黑客方式(黑客不适合我):

IntrinsicWidth(
  child: Column(
  children: [
    Text(dateRange, style: _jobTitleStyle(context)),
    Container(height: 1, color: Colors.white),
  ],
 ),
),

使用容器绘制一条线,如下所示。然后使用IntrinsicWidth将其缩小以匹配Text的大小(注意,如果过度使用,这可能会影响性能)。

相关问题