一、GestureDetector 的介绍
GestureDetector：是手势识别的组件，可以识别点击、双击、长按事件、拖动、缩放等手势
二、GestureDetector的源码介绍
GestureDetector({
Key key,
this.child,
this.onTapDown,//按下时回调
this.onTapUp,//抬起时回调
this.onTap,//点击事件回调
this.onTapCancel,//点击取消事件回调
this.onSecondaryTap,
this.onSecondaryTapDown,
this.onSecondaryTapUp,
this.onSecondaryTapCancel,
this.onTertiaryTapDown,
this.onTertiaryTapUp,
this.onTertiaryTapCancel,
this.onDoubleTapDown,//短时间内双击按下时回调
this.onDoubleTap,//短时间内双击回调
this.onDoubleTapCancel,//短时间内双击取消事件回调
this.onLongPress,//长按事件回调
this.onLongPressStart,//长按开始事件回调
this.onLongPressMoveUpdate,//长按移动事件回调
this.onLongPressUp,//长按抬起事件回调
this.onLongPressEnd,//长按结束事件回调
this.onSecondaryLongPress,
this.onSecondaryLongPressStart,
this.onSecondaryLongPressMoveUpdate,
this.onSecondaryLongPressUp,
this.onSecondaryLongPressEnd,
this.onVerticalDragDown,//垂直滑动按下事件回调
this.onVerticalDragStart,//垂直滑动开始事件回调
this.onVerticalDragUpdate,//垂直滑动更新事件回调
this.onVerticalDragEnd,//垂直滑动结束事件回调
this.onVerticalDragCancel,//垂直滑动取消事件回调
this.onHorizontalDragDown,//水平滑动按下事件回调
this.onHorizontalDragStart,///水平滑动开始事件回调
this.onHorizontalDragUpdate,//水平滑动更新事件回调
this.onHorizontalDragEnd,//水平滑动结束事件回调
this.onHorizontalDragCancel,//水平滑动取消事件回调
this.onForcePressStart,//回调函数只会在有压力的设备上被触发
this.onForcePressPeak,
this.onForcePressUpdate,
this.onForcePressEnd,
this.onPanDown,//按压时回调
this.onPanStart,//按压拖动开始回调
this.onPanUpdate,//按压拖动回调
this.onPanEnd,//按压拖动结束回调
this.onPanCancel,//按压拖动取消回调
this.onScaleStart,//缩放开始事件回调
this.onScaleUpdate,//缩放更新事件回调
this.onScaleEnd,//缩放结束事件回调
this.behavior,//手势检测器在触摸中应该如何工作
this.excludeFromSemantics = false,
this.dragStartBehavior = DragStartBehavior.start,
}) : assert(excludeFromSemantics != null),
assert(dragStartBehavior != null),
assert(() {
final bool haveVerticalDrag = onVerticalDragStart != null || onVerticalDragUpdate != null || onVerticalDragEnd != null;
final bool haveHorizontalDrag = onHorizontalDragStart != null || onHorizontalDragUpdate != null || onHorizontalDragEnd != null;
final bool havePan = onPanStart != null || onPanUpdate != null || onPanEnd != null;
final bool haveScale = onScaleStart != null || onScaleUpdate != null || onScaleEnd != null;
if (havePan || haveScale) {
if (havePan && haveScale) {
throw FlutterError.fromParts([
ErrorSummary('Incorrect GestureDetector arguments.'),
ErrorDescription(
'Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.'
),
ErrorHint('Just use the scale gesture recognizer.')
]);
}
final String recognizer = havePan ? 'pan' : 'scale';
if (haveVerticalDrag && haveHorizontalDrag) {
throw FlutterError(
'Incorrect GestureDetector arguments.\n'
'Simultaneously having a vertical drag gesture recognizer, a horizontal drag gesture recognizer, and a $recognizer gesture recognizer '
'will result in the $recognizer gesture recognizer being ignored, since the other two will catch all drags.'
);
}
}
return true;
}()),
super(key: key);
三、GestureDetector的属性介绍
| 属性 | 说明 |
|---|---|
| onTapDown | 按下时回调 |
| onTapUp | 抬起时回调 |
| onTap | 点击事件回调 |
| onTapCancel | 点击取消事件回调 |
| onDoubleTapDown | 短时间内双击按下时回调 |
| onDoubleTap | 短时间内双击回调 |
| onDoubleTapCancel | 短时间内双击取消事件回调 |
| onLongPress | 长按事件回调 |
| onLongPressStart | 长按开始事件回调 |
| onLongPressMoveUpdate | 长按移动事件回调 |
| onLongPressUp | 长按抬起事件回调 |
| onLongPressEnd | 长按结束事件回调 |
| onVerticalDragDown | 垂直滑动按下事件回调 |
| onVerticalDragStart | 垂直滑动开始事件回调 |
| onVerticalDragUpdate | 垂直滑动更新事件回调 |
| onVerticalDragEnd | 垂直滑动结束事件回调 |
| onVerticalDragCancel | 垂直滑动取消事件回调 |
| onHorizontalDragDown | 水平滑动按下事件回调 |
| onHorizontalDragStart | 水平滑动开始事件回调 |
| onHorizontalDragUpdate | 水平滑动更新事件回调 |
| onHorizontalDragEnd | 水平滑动结束事件回调 |
| onHorizontalDragCancel | 水平滑动取消事件回调 |
| onPanDown | 按压时回调（我自己理解为点击事件，但是比onTap优先级高，onPan先执行先取消,onPan比onTap多个滑动监听） |
| onPanStart | 按压拖动开始回调 按压开始，不能与 onScale ，onVerticalDrag，onHorizontalDrag，同时使用 |
| onPanUpdate | 按压拖动回调 |
| onPanEnd | 按压拖动结束回调 |
| onPanCancel | 按压拖动取消回调 |
| onScaleStart | 缩放开始事件回调 缩放开始，不能与 onPan ，onVerticalDrag，onHorizontalDrag，同时使用 |
| onScaleUpdate | 缩放更新事件回调 |
| onScaleEnd | 缩放结束事件回调 |
| behavior | 手势检测器在触摸中应该如何工作 HitTestBehavior.deferToChild:只有当前容器中的child被点击时才会响应点击事件 HitTestBehavior.opaque:点击整个区域都会响应点击事件，但是点击事件不可穿透向下传递，注释翻译：阻止视觉上位于其后方的目标接收事件。 HitTestBehavior.translucent:同样是点击整个区域都会响应点击事件，和opaque的区别是点击事件是否可以向下传递，注释翻译：半透明目标既可以在其范围内接受事件，也可以允许视觉上位于其后方的目标接收事件 |
四、一些触摸事件，监听的调用顺序
4.1、点击屏幕：onPanDown--onPanCancel--onTapDown--onTapUp--onTap
4.2、点击滑动：onPanDown--onTapDown--onTapCancel--onPanStart--onPanUpdate--onPanEnd
4.3、双击屏幕：onPanDown--onPanCancel--onDoubleTapDown--onPanDown--onPanCancel--onDoubleTap
4.4、长按屏幕：onPanDown--onTapDown--onTapCancel--onPanCancel--onLongPressStart--onLongPress--onLongPressMoveUpdate--onLongPressEnd--onLongPressUp
4.5、手指左右滑动：onVerticalDragDown--onHorizontalDragDown--onVerticalDragCancel--onHorizontalDragStart--onHorizontalDragUpdate--onHorizontalDragEnd
4.6、手指上下滑动：onVerticalDragDown--onHorizontalDragDown--onHorizontalDragCancel--onVerticalDragStart--onVerticalDragUpdate--onVerticalDragEnd
4.7、缩放：onScaleStart--onScaleUpdate--onScaleEnd
五、GestureDetector的demo
5.1、给组件添加按键监听
class _GestureDetectorFulState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("GestureDetector学习"),
),
body: Center(
child: GestureDetector(
//一定要加（按钮和文字之间的空白，也添加监听了）
behavior: HitTestBehavior.opaque,
onPanDown: (value) {
print("我是onPanDown");
},
child: Row(
children: [
OutlinedButton(
child: Text("按钮"),
onPressed: () {
print("点击了button");
},
),
SizedBox(width: 80),
Text("文字")
],
)
),
)
));
}
}