在RichText小部件中为TextSpan背景添加额外的填充

时间:2018-09-29 01:15:33

标签: dart flutter

我有一个RichText和一个TextSpan。我希望其中一个TextSpan小部件具有背景,因此我将background: Paint()..color = Colors.redAccent作为其文本样式。

是否可以在背景中添加一些额外的红色空间/填充。

这是当前外观:

before padding on text

这就是我希望的外观(请注意突出显示的文本顶部和底部的红色):

after padding on text (desired)

这是使用的代码:

Scaffold(
  appBar: new AppBar(),
  body: new RichText(
    text: new TextSpan(
      text: 'This is a one the lines in the span \n ',
      style: TextStyle(fontSize: 15.0, color: Colors.black),
      children: <TextSpan>[
        new TextSpan(
            text: 'This is the second line',
            style: new TextStyle(fontWeight: FontWeight.bold)),
        new TextSpan(
            text: ' background on me ',
            style: new TextStyle(
              fontWeight: FontWeight.bold,
              background: Paint()..color = Colors.redAccent,
            )),
        new TextSpan(text: ' This is another of the lines in the span!'),
      ],
    ),
  ), // This trailing comma makes auto-formatting nicer for build methods.
)

我尝试将height添加到文本样式中,但这不会影响背景的高度。

3 个答案:

答案 0 :(得分:4)

非常难看的解决方案,但我还没有找到其他解决方案(

TextStyle(fontWeight: FontWeight.bold,
  background: Paint()..color = Colors.redAccent
    ..strokeWidth = 16.5
    ..style = PaintingStyle.stroke,)

strokeWidth必须足够大以覆盖文本的高度。在我的情况下,16.5是最小的合适值

答案 1 :(得分:4)

2019年带有1.7.8抖动的新解决方案是WidgetSpan,您只需添加一个Container和一个Padding或小部件的任意组合即可使品种更多!

以下是用于此案例的示例:

WidgetSpan(
  child: Container(
    color: Colors.red,
    padding: EdgeInsets.all(8.0),
    child: Text("background on me", style: ...),
  )
)

别忘了将<TextSpan>[]更改为<InlineSpan>[],就是这样!

答案 2 :(得分:0)

您可以使用Padding类。

也许question's answer可以为您提供帮助。