Flutter 中如何为同一个InkWell同时实现onTap单击与长按触发不同操作

实现方案 #

你可以通过以下两种方式实现需求，按需选择即可：

方案1：使用InkWell原生长按回调（改动最小，默认500ms触发） #

Flutter 内置的 InkWell 组件自带 onLongPress 长按回调，默认触发时长为500ms，触发长按后手势竞技场会自动消费触摸事件，不会再触发原本的 onTap 点击逻辑，符合你要求的「触发y就不触发x」的需求。
示例代码如下：

InkWell(
  splashColor: Colors.black,
  highlightColor: Colors.blue,
  onTap: pageX, // 单击触发x逻辑
  onLongPress: () {
    // 长按触发y逻辑
    pageY();
  },
  child: Container()
);

方案2：自定义1秒长按触发时长 #

如果你需要严格控制按住1秒才触发y逻辑，可以结合Timer和InkWell的触摸生命周期回调实现：

1. 首先在State类中定义计时器和触发标记：

import 'dart:async';

// State类内部定义
Timer? _pressTimer;
bool _hasTriggeredLongPress = false;

2. 修改InkWell的事件配置：

InkWell(
  splashColor: Colors.black,
  highlightColor: Colors.blue,
  onTapDown: (_) {
    // 按下时重置状态并开始计时
    _hasTriggeredLongPress = false;
    _pressTimer = Timer(const Duration(seconds: 1), () {
      _hasTriggeredLongPress = true;
      pageY(); // 按住满1秒执行y逻辑
    });
  },
  onTapCancel: () {
    // 触摸中断时取消计时
    _pressTimer?.cancel();
  },
  onTapUp: (_) {
    _pressTimer?.cancel();
    // 未触发长按的情况下才执行x逻辑
    if (!_hasTriggeredLongPress) {
      pageX();
    }
  },
  child: Container()
);

3. 组件销毁时释放计时器，避免内存泄漏：

@override
void dispose() {
  _pressTimer?.cancel();
  super.dispose();
}

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