GestureDetector与Tooltip无法协同实现点击复制并显示提示的问题

你需要实现点击文本时复制数据到剪贴板，同时显示"复制成功"的提示，但嵌套使用Tooltip和GestureDetector时，两个组件的点击逻辑只能触发一个：

第一种写法：仅Tooltip触发，复制逻辑不执行 #

GestureDetector(
  onTap: () async {
    print('on Tap'); // 不会触发，复制逻辑不执行，但Tooltip会显示
    await Clipboard.setData(
      ClipboardData(
        text: content,
      ),
    );
  },
  child: const Tooltip(
    message: 'Copied!',
    triggerMode: TooltipTriggerMode.tap,
    child: Text('Copy Me'),
  ),
)

第二种写法：复制逻辑执行，但Tooltip不显示 #

Tooltip(
  message: 'Copied',
  triggerMode: TooltipTriggerMode.tap,
  child: GestureDetector(
    onTap: () async {
      print('Pressed '); // 会触发复制，但Tooltip不显示
      await Clipboard.setData(
        ClipboardData(
          text: content,
        ),
      );
    },
    child: Text('Copy Me'),
  ),
)

可行解决方案 #

方案一：利用Tooltip的onTriggered回调

当Tooltip的triggerMode设为tap时，onTriggered会在Tooltip触发时同步调用，直接在这里处理复制逻辑即可，无需额外的GestureDetector：

Tooltip(
  message: 'Copied!',
  triggerMode: TooltipTriggerMode.tap,
  onTriggered: () async {
    await Clipboard.setData(ClipboardData(text: content));
  },
  child: const Text('Copy Me'),
)

方案二：手动控制Tooltip显示

通过GlobalKey获取Tooltip的状态，在GestureDetector的点击事件中先执行复制，再主动触发Tooltip显示：

final tooltipKey = GlobalKey<TooltipState>();

// 组件部分
GestureDetector(
  onTap: () async {
    // 执行复制逻辑
    await Clipboard.setData(ClipboardData(text: content));
    // 手动触发Tooltip显示
    tooltipKey.currentState?.ensureTooltipVisible();
  },
  child: Tooltip(
    key: tooltipKey,
    message: 'Copied!',
    // 设置为手动触发，避免自动拦截手势
    triggerMode: TooltipTriggerMode.manual,
    child: const Text('Copy Me'),
  ),
)

冲突原因说明 #

Tooltip内部自带手势识别器，嵌套时手势事件会被优先级高的组件拦截，导致只能触发其中一个的逻辑。以上两种方案通过复用Tooltip自身回调或手动控制显示的方式，避免了手势冲突。

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