一、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(<DiagnosticsNode>[
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<GestureDetectorFul> {
@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("文字")
],
)
),
)
));
}
}