我有一个RichText
和一个TextSpan
。我希望其中一个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
添加到文本样式中,但这不会影响背景的高度。
答案 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可以为您提供帮助。