Flutter:如何在RichText中显示TextSpan的工具提示 [英] Flutter: How to display Tooltip for TextSpan inside RichText
问题描述
我的段落很长,很多单词必须带有提示信息.当您单击这些单词中的任何一个时,都将出现工具提示消息.
I have big paragraph, and many words have to have tooltip message. When you click on any of these words, then tooltip message should be appeared.
我尝试使用RichText小部件,其中包含许多 TextSpan
子级,如下所示:
I tried to use RichText widget where it contains many TextSpan
children like below:
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: "Welcome to"),
TextSpan(text: "Flutter"),
...
]),
),
当我单击 TextSpan
时,我需要显示工具提示文本我试图用 Tooltip
小部件
I need to display tooltip text when i click on TextSpan
I tried to wrap TextSpan
with Tooltip
widget
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: "Welcome to"),
...
Tooltip(
message: "any text here",
child: TextSpan(text: "Flutter"),
),
...
]),
),
但这是不可能的,因为子级只能是 TextSpan
.
but this is not possible since the children have to be TextSpan
only.
有人对如何实现此要求有想法吗?
anyone have an idea on how to achieve this requirement?
推荐答案
使用 TextSpan ,您可以通过两种方式:使用或不使用 children
参数.>
With TextSpan you have 2 ways to do it: With or without using children
parameter.
Widget _toolTipSimple() {
return Center(
child: Tooltip(
message: "Flutter",
child: RichText(
text: TextSpan(
text: "Welcome to", style: TextStyle(fontSize: 70)),
),
),
);
}
这是一个复杂的版本,没有工具提示,但是它可以处理对特定单词的点击:
This one is a complex version without a Tooltip but it handles the click on a specific word:
Widget _snackBarTextSpanChildren(BuildContext context) {
return Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: [
TextSpan(text: "Welcome to ", style: TextStyle(fontSize: 70)),
TextSpan(
text: "Flutter",
style: TextStyle(fontSize: 70),
recognizer: TapGestureRecognizer()..onTap = () {
Scaffold.of(context).showSnackBar(SnackBar(content: Text('Hello!')));
}),
],
),
),
);
}
此结果如下:
这篇关于Flutter:如何在RichText中显示TextSpan的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!