是否可以在文本和下划线之间有一定高度的文本下划线？

Posted 2023-02-23

【中文标题】是否可以在文本和下划线之间有一定高度的文本下划线？

【英文标题】：Is it possible to underline text with some height between text and underline line?

【发布时间】：2020-08-21 06:47:28

【问题描述】：

今天我正在尝试制作sticker.ly 应用程序UI。但我坚持在下划线和文本之间添加空格。这是我的代码

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') 之间添加空格。有没有更好的方法来做到这一点？

【参考方案1】：

这是一个简单的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,
            ),
          )

我写了一个 article 来讨论文本下划线和其他一些解决方案，但这是我最喜欢的。

【讨论】：

不错的解决方案！我已将代码包装到一个扩展中，以避免使小部件的代码混乱，请参阅此答案：***.com/a/69343754/2083587

【参考方案2】：

你能试试这样的吗：

Container(
padding: EdgeInsets.only(
  bottom: 3, // This can be the space you need betweeb 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,)
  ,),)

【讨论】：

为什么你从 *** 复制你的答案？...我试过这对我不起作用

为发展 Flutter 社区提供您独特的答案，而不是复制答案

我亲自尝试过，效果不错，如果对你不起作用，我很抱歉。

这太完美了！因为第一个答案实际上创建了下划线，但无法控制间距，而且它们几乎总是靠得太近。

【参考方案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,),),
                    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>[

            ],),
          ),
        ],
      ),
    );