写点什么

Flutter 开发之——事件监听

用户头像
Android架构
关注
发布于: 20 小时前

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


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


, 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,


),


),


)

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter开发之——事件监听