删除 TextSpan 后面的透明孔？答案

【问题标题】：Remove transparent hole behind TextSpan?删除 TextSpan 后面的透明孔？
【发布时间】：2021-07-12 10:38:07
【问题描述】：

我正在尝试为 textspan 添加背景颜色，因为我不想为此使用容器，但是一个透明的洞不知从何而来。如何解决？

我的代码是

RichText(
              text: TextSpan(text: 'TEST: ', children: [
                TextSpan(
                  text: 'HELLO',
                  style: TextStyle(
                      background: Paint()
                        ..color = Colors.red
                        ..strokeWidth = 10
                        ..style = PaintingStyle.stroke,
                      fontWeight: FontWeight.bold),
                )
              ]),
            )

它是一个绿色容器的子容器。

我在文本“Hello”后面得到this image 的输出。

如何使红色不透明？

【问题讨论】：

您能否显示包含此 RichText 的父级的完整代码，因为我看到的是有一个边框覆盖了“Hello”文本

标签： flutter dart

【解决方案1】：

使用PaintingStyle.fill代替描边或增加strokeWidth直到孔消失

RichText(
                text: TextSpan(text: 'TEST: ', children: [
                  TextSpan(
                    text: 'HELLO',
                    style: TextStyle(
                        background: Paint()
                          ..color = Colors.red
                          ..strokeWidth = 10
                          ..style = PaintingStyle.fill,
                        fontWeight: FontWeight.bold),
                  )
                ]),
              ),

【讨论】：

这可行，但它现在与文本的高度和宽度相同。如何在文本 HELLO 中添加类似外观的填充 -

【解决方案2】：

你可以去掉strokeWidth，把PaintingStyle.stroke换成PaintingStyle.fill，这样就好了。

 RichText(text: TextSpan(text: 'TEST: ', 
       children: [
           TextSpan(
                text: 'HELLO',
                 style: TextStyle(
                    background: Paint()
                      ..color = Colors.red
                      ..style = PaintingStyle.fill,
                      fontWeight: FontWeight.bold),
              )
         ]),
        ),

【讨论】：

这可行，但它现在与文本的高度和宽度相同。如何在文本 HELLO 中添加类似外观的填充