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

Question

我有一个带有一些 TextSpan 的 RichText。我希望其中一个 TextSpan 小部件具有背景，因此我使用 background: Paint()..color = Colors.redAccent 作为其文本样式。

有没有办法在背景中添加一些额外的红色空间/填充。

这是它目前的样子:

这就是我想要的样子(注意突出显示文本顶部和底部的额外红色):

这是使用的代码:

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，但不影响背景高度。

Answer 1

flutter 1.7.8 2019 年的新解决方案是 WidgetSpan , 你可以添加一个 Container和 Padding或小部件的任何组合，以增加品种!

这是一个用于案例的示例:

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

别忘了更改 <TextSpan>[]至<InlineSpan>[] ，就是这样!