Flutter TextSpan手势检测：如何识别用户点击的具体单词？

当然有办法实现！在Flutter里要追踪用户点击TextSpan中的具体单词，我们可以借助TapGestureRecognizer来完成，下面是具体的实现思路和示例：

• 为每个需要检测点击的单词单独创建TextSpan，并给每个TextSpan绑定一个专属的TapGestureRecognizer，在其onTap回调中处理点击事件（比如打印被点击的单词、触发业务逻辑等）。

• 举个直观的代码示例：

RichText(
  text: TextSpan(
    style: const TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: "Flutter",
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print("点击了单词：Flutter");
            // 这里可以添加自定义逻辑，比如弹窗提示、跳转页面等
          },
        style: const TextStyle(color: Colors.blueAccent),
      ),
      const TextSpan(text: " "),
      TextSpan(
        text: "TextSpan",
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print("点击了单词：TextSpan");
          },
        style: const TextStyle(color: Colors.orange),
      ),
    ],
  ),
)

• 重要提醒：每个TapGestureRecognizer都是持有资源的对象，记得在页面销毁时调用dispose()方法释放资源，避免内存泄漏。如果是在StatefulWidget中实现，可以这么处理：

late TapGestureRecognizer _flutterRecognizer;
late TapGestureRecognizer _textSpanRecognizer;

@override
void initState() {
  super.initState();
  _flutterRecognizer = TapGestureRecognizer()
    ..onTap = () => print("点击了单词：Flutter");
  _textSpanRecognizer = TapGestureRecognizer()
    ..onTap = () => print("点击了单词：TextSpan");
}

@override
void dispose() {
  _flutterRecognizer.dispose();
  _textSpanRecognizer.dispose();
  super.dispose();
}

如果是动态生成的单词列表，还可以通过循环批量创建TextSpan和对应的TapGestureRecognizer，并把所有识别器存入一个列表，在dispose时统一释放即可。

内容的提问来源于stack exchange，提问作者adko