Flutter：如何在 RichText 中显示 TextSpan 的工具提示

Question

我有一个大段落，很多单词必须有工具提示消息。当您单击这些单词中的任何一个时，应该会出现工具提示消息。

我尝试使用 RichText 小部件，其中包含许多TextSpan子项，如下所示：

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        TextSpan(text: "Flutter"),
        ... 
     ]),
),

TextSpan 当我单击“我尝试用小部件换行”TextSpan时，我需要显示工具提示Tooltip文本

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        ...
        Tooltip(
            message: "any text here",
            child: TextSpan(text: "Flutter"),
        ),
        ...            
     ]),
),

但这是不可能的，因为孩子们必须是TextSpan唯一的。

有人知道如何实现这个要求吗？

Answer 1

使用TextSpan，您有 2 种方法可以做到这一点：使用或不使用children参数。

Widget _toolTipSimple() {
    return Center(
      child: Tooltip(
        message: "Flutter",
        child: RichText(
          text: TextSpan(
              text: "Welcome to", style: TextStyle(fontSize: 70)),
        ),
      ),
   );
}

这是一个没有工具提示的复杂版本，但它处理特定单词的点击：

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!')));
                }),
          ],
        ),
      ),
    );
  }

结果如下：

Answer 2

WidgetSpan您可以像这样创建自定义：

class TooltipSpan extends WidgetSpan {
  TooltipSpan({
    @required String message,
    @required InlineSpan inlineSpan,
  }) : super(
          child: Tooltip(
            message: message,
            child: Text.rich(
              inlineSpan,
            ),
          ),
        );
}

并用它包裹你的 TextSpan ：

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        ...
        TooltipSpan(
            message: "any text here",
            inlineSpan: TextSpan(text: "Flutter"),
        ),
        ...            
     ]),
),