使用填充在下划线上方显示文本答案

【问题标题】：Display text above underline with padding使用填充在下划线上方显示文本
【发布时间】：2021-05-28 04:32:37
【问题描述】：

有没有办法在 Flutter 中实现以下结果，其中文本下方的下划线将被溢出它的字母周围的填充很好地隐藏，例如“g”、“q”、“y”等？

模拟器（当前）：

设计（期望）：

字体：Spartan

【问题讨论】：

标签： flutter text fonts underline

【解决方案1】：

我发现实现这一点的最佳方法是使用文本笔划和堆栈来创建下划线效果。代码如下：

Align(
  alignment: Alignment.centerLeft,
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 6.0),
    child: Stack(
      children: [
        Positioned(
          bottom: 2,
          left: 0,
          right: 0,
          child: Container(height: 1.0, color: const Color(0xFF2F3543)),
        ),
        Text(
          "Forgot password?",
          style: TextStyle(
            fontWeight: FontWeight.w300,
            inherit: true,
            fontSize: 13.0,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 2
              ..color = Colors.white,
          ),
        ),
        Text(
          "Forgot password?",
          style: TextStyle(
            color: const Color(0xFF2F3543),
            fontWeight: FontWeight.w300,
            inherit: true,
            fontSize: 13.0,
          ),
        )
      ],
    ),
  ),
)

以及结果截图

【讨论】：

【解决方案2】：

编辑

第一个看起来工作但看起来不太好，第二个工作正常但 p 字不是那么好。当你不想添加下划线时，只需写 decoration:TextDecoration.none。

    Text.rich(
      TextSpan(
        text: 'For ',
        style: TextStyle(decoration: TextDecoration.underline, fontSize: 25),
        children: <TextSpan>[
          TextSpan(text: 'g',style:TextStyle(decoration: TextDecoration.none)),
          TextSpan( text: ' ',style:TextStyle(decoration: TextDecoration.underline, decorationThickness: 1)),
          TextSpan( text: ' p',style:TextStyle(decoration: TextDecoration.none,)),
          TextSpan( text: 'assword?',style:TextStyle(decoration: TextDecoration.underline)),
          //you can add more text span here
        ],
      ),
    ),
    Row(
      children: <Widget>[
        Text('For', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text('g', style: TextStyle(decoration: TextDecoration.none, fontSize: 25)),
        Text('ot', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text(' ', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text('p', style: TextStyle(decoration: TextDecoration.none, fontSize: 25)),
        Text('assword', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
      ],
    )

Working example image

【讨论】：

每当您回复时，请务必写一些段落来说明您所做的事情。首先，您的示例有错误，因为父 TextSpan 具有 TextStyle 装饰，无论如何都会装饰整个文本。其次，尽管它看起来可以很好地处理字母“g”，但它并没有像我提到的那样处理字母 p。我的问题是是否有一种自动的方法来填充会溢出底线的文本。
看看这个答案可能会对你有所帮助。我为你编辑了
感谢您编辑您的帖子。从您的示例中，查看字母“p”-圆形部分下方没有下划线，而根据设计，我需要它。我找到的解决方案（如下）解决了这个问题。