Flutter 同时使用 onTap 和 onDoubleTap 时的延迟问题解决方案
在 Flutter 中,当 GestureDetector 组件同时使用 onTap 和 onDoubleTap 时,可能会出现 onTap 延迟响应的问题。这是因为 onDoubleTap 需要等待一段时间才能确定是否为双击,而这会导致 onTap 的执行延迟。
为了解决这个问题,可以使用 GestureDetector 的 onTapDown 回调来实现单击事件的响应,同时在 onTapUp 回调中判断两次点击时间间隔是否小于一定值来实现双击事件的响应。
具体实现如下:
class MyWidget extends StatelessWidget {
final GestureTapCallback onTap;
final GestureTapCallback onDoubleTap;
const MyWidget({Key key, this.onTap, this.onDoubleTap}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (TapDownDetails details) {
// 记录单击事件的时间
_lastTapTime = DateTime.now().millisecondsSinceEpoch;
},
onTapUp: (TapUpDetails details) {
// 判断两次点击时间间隔是否小于一定值
if (DateTime.now().millisecondsSinceEpoch - _lastTapTime < _doubleTapDelay) {
// 触发双击事件
if (onDoubleTap != null) {
onDoubleTap();
}
} else {
// 触发单击事件
if (onTap != null) {
onTap();
}
}
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
}
int _lastTapTime = 0;
final int _doubleTapDelay = 250; // 双击事件的时间间隔
}
在上面的代码中,我们通过记录单击事件的时间和设置双击事件的时间间隔来实现了单击和双击事件的响应。当用户点击屏幕时,我们记录下当前时间,当用户再次点击屏幕时,我们判断两次点击时间间隔是否小于双击事件的时间间隔,如果是,则触发双击事件,否则触发单击事件。这样就可以避免单击事件的延迟问题了。
原文地址: https://www.cveoy.top/t/topic/j5b6 著作权归作者所有。请勿转载和采集!