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屋！