Flutter 开发之——事件监听
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))
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,
),
),
)
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论