一 概述
本文介绍的事件监听分为两类:触摸层和手势层
- 触摸层:用户手指在页面上的按下、移动、抬起和取消操作,并可以实时获取用户手指在页面上的位置
- 手势层:触摸层的封装,对用户手势进行监听;滑动、拖拽、单击、双击、长按等
二 触摸事件(Listener)
2.1 构造函数
class Listener extends SingleChildRenderObjectWidget {
const Listener({
Key? key,
this.onPointerDown,
this.onPointerMove,
this.onPointerUp,
this.onPointerHover,
this.onPointerCancel,
this.onPointerSignal,
this.behavior = HitTestBehavior.deferToChild,
Widget? child,
})
...
}
2.2 说明
- Listener是一个处理事件交互的组件
- 当需要监听某个组件上的触摸行为时,只需要将其嵌套进Listener组件,并为其设置监听回调函数即可
2.3 Listener监听事件
监听函数 | 说明 |
---|---|
onPointerDown | 按下时回调 |
onPointerMove | 移动时回调 |
onPointerUp | 抬起时回调 |
所有的Pointerxxx都继承于PointerEvent,属性如下
属性 | 说明 |
---|---|
position | 相对屏幕的坐标的偏移 |
localPosition | 相对当前控件的偏移 |
pressure | 按压力度 |
delta | 2次指针移动事件的偏移 |
orientation | 指针移动方向 |
2.4 示例
代码
Listener(
onPointerDown: (PointerDownEvent pointerDownEvent) {
print('$pointerDownEvent');
},
onPointerMove: (PointerMoveEvent pointerMoveEvent) {
print('$pointerMoveEvent');
},
onPointerUp: (PointerUpEvent upEvent) {
print('$upEvent');
},
child: Container(height: 200, width: 200, color: Colors.blue, alignment: Alignment.center,),
)
打印结果
I/flutter (24815): _TransformedPointerDownEvent#876cf(position: Offset(123.0, 174.5))
I/flutter (24815): _TransformedPointerUpEvent#7c12b(position: Offset(123.0, 174.5))
I/flutter (24815): _TransformedPointerDownEvent#d6763(position: Offset(114.0, 213.0))
I/flutter (24815): _TransformedPointerMoveEvent#37bbf(position: Offset(114.0, 214.0))
I/flutter (24815): _TransformedPointerMoveEvent#27cbb(position: Offset(114.0, 216.0))
...
I/flutter (24815): _TransformedPointerMoveEvent#1951d(position: Offset(123.0, 225.0))
I/flutter (24815): _TransformedPointerMoveEvent#f99e9(position: Offset(124.5, 225.5))
I/flutter (24815): _TransformedPointerUpEvent#b1a92(position: Offset(124.5, 225.5))
三 手势事件(GestureDetector)
3.1 构造函数
class GestureDetector extends StatelessWidget {
GestureDetector({
Key? key,
this.child,
this.onTapDown,
this.onTapUp,
this.onTap,
this.onTapCancel,
this.onSecondaryTap,
...
}
3.2 说明
- GestureDetector是手势识别组件
- GestureDetector可以识别单击、双击、长按、拖拽、缩放等手势
3.3 事件
单击事件
单击事件包含
- onTapDown:按下时回调
- onTapUp:抬起时回调
- onTap:点击事件回调
- onTapCancel:点击取消事件回调
用法
GestureDetector(
onTapDown: (TapDownDetails tapDownDetails) {
print('onTapDown');
},
onTapUp: (TapUpDetails tapUpDetails) {
print('onTapUp');
},
onTap: () {
print('onTap');
},
onTapCancel: () {
print('onTapCancel');
},
child: Center(child: Container(width: 200,height: 200,color: Colors.red,),),
)
按下然后抬起调用顺序
onTapDown-> onTapUp-> onTap
按下后移动的调用顺序
onTapDown-> onTapCancel
双击事件
双击是快速且连续2次在同一个位置点击,双击监听使用onDoubleTap方法,用法如下:
GestureDetector(
onDoubleTap: ()=>print('onDoubleTap'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
长按事件
长按事件(LongPress)包含长按开始、移动、抬起、结束事件,说明如下:
- onLongPressStart:长按开始事件回调
- onLongPressMoveUpdate:长按移动事件回调
- onLongPressUp:长按抬起事件回调
- onLongPressEnd:长按结束事件回调
- onLongPress:长按事件回调
示例
GestureDetector(
onLongPressStart: (v) => print('onLongPressStart'),
onLongPressMoveUpdate: (v) => print('onLongPressMoveUpdate'),
onLongPressUp: () => print('onLongPressUp'),
onLongPressEnd: (v) => print('onLongPressEnd'),
onLongPress: () => print('onLongPress'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
水平/垂直拖动事件
垂直/水平拖动事件包括按下、开始、移动更新、结束、取消事件,以垂直为例说明如下
- onVerticalDragDown:垂直拖动按下事件回调
- onVerticalDragStart:垂直拖动开始事件回调
- onVerticalDragUpdate:指针移动更新事件回调
- onVerticalDragEnd:垂直拖动结束事件回调
- onVerticalDragCancel:垂直拖动取消事件回调
示例
GestureDetector(
onVerticalDragStart: (v) => print('onVerticalDragStart'),
onVerticalDragDown: (v) => print('onVerticalDragDown'),
onVerticalDragUpdate: (v) => print('onVerticalDragUpdate'),
onVerticalDragCancel: () => print('onVerticalDragCancel'),
onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
用户垂直方向拖动调用顺序如下
onVerticalDragDown->onVerticalDragStart->onVerticalDragUpdate-> … -> onVerticalDragUpdate-> onVerticalDragEnd。
缩放事件
缩放(Scale)包含缩放开始、更新、结束。说明如下
- onScaleStart:缩放开始事件回调
- onScaleUpdate:缩放更新事件回调
- onScaleEnd:缩放结束事件回调
示例
GestureDetector(
onScaleStart: (v) => print('onScaleStart'),
onScaleUpdate: (ScaleUpdateDetails v) => print('onScaleUpdate'),
onScaleEnd: (v) => print('onScaleEnd'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
缩放需要2个指针,对于手机就是2个手指进行缩放操作,调用顺序如下
onScaleStart->onScaleUpdate->…->onScaleUpdate->onScaleEnd