前言
GestureDetector基本用法
常用事件
监听事件实现缩放
监听事件实现拖拽
事件通知
在Flutter开发App的过程中,我们除了需要灵活的使用各种组件之外,还需要掌握手势的识别,比如我们常常需要在操作App的时候使用到缩放,双击,放大,缩小等操作,这些Flutter都给我们提供了监听的组件GestureDetector。这篇博文将详细介绍GestureDetector手势识别的使用规则。(拖动手势监听)
我们前面提到过,在Flutter开发中,一切皆是组件,所以GestureDetector同样是一个组件,我们使用它,通常是作为一个父Widget包裹一个子Widget外面(也就是你需要捕捉那个组件的手势,就把GestureDetector套在外外面),而内部我们通过onTap回调来实现其点击的效果,代码如下:
比如上面的代码就是改造Text组件成为按钮的方式,这里捕捉了点击事件。
GestureDetector手势识别不仅仅只有onTap事件,还有很多很多的常用事件,博主通过一张表格将它们全部列举了出来,方便大家查阅:
属性
取值意义
onTapDwon
当按下屏幕时触发
onTap
当与屏幕短暂地触碰时触发,最常用
onTapUp
当用户停止触碰屏幕时触发
onTapCancel
当用户触摸屏幕,但没有完成Tap事件时触发
onDoubleTap
快速双击屏幕时触发
onLongPress
当长按屏幕时触发(与屏幕接触事件必须超过500ms)
onPanUpdate
当在屏幕上移动时触发
onVerticalDragDown
当手指触碰屏幕且准备往屏幕垂直方向移动时触发
onVerticalDragStart
当手指触碰屏幕且开始往屏幕垂直方向移动时触发
onVerticalDragUpdate
当手指触碰屏幕且开始往屏幕垂直方向移动并发生位移时触发
onVerticalDragEnd
当用户完成垂直方向触摸屏幕时触发
onVerticalDragCancel
当用户中断了onVerticalDragDown时触发
onHorizontalDragDown
当手指触摸屏幕且准备往屏幕水平方向移动时触发
onHorizontalDragStart
当手指触摸屏幕且开始往屏幕水平方向移动时触发
onHorizontalDragUpdate
当手指触摸屏幕且开始往屏幕水平方向移动并发生位移时触发
onHorizontalDragEnd
当用户完成水平方向触摸屏幕时触发
onHorizontalDragCancel
当用户中断了onHorizontalDragDown时触发
onPanDown
当用户触摸屏幕时触发
onPanStart
当用户触摸屏幕并开始移动时触发
当用户触摸屏幕并产生移动时触发
onPanEnd
当用户完成触摸屏幕时触发
onScaleStart
当用户触摸屏幕并开始缩放时触发
onScaleUpdate
当用户触摸屏幕并产生缩放时触发
onScaleEnd
当用户完成缩放时触发
虽然说上面表格非常详细,但其中有些事件是互斥的,并不能同时存在,比如onVerticalUpdate,onHorizontalUpdate,onPanUpdate这些三个事件都不能同时存在,否则会报错。
另外,onPanUpdate和onScaleUpdate也不能同时存在,这是因为在Gesture识别器里,Scale操作是Pan操作的超集。
既然我们了解了如何使用这些事件,那么,我们就应该实践起来,这里小编将用上面的事件实现一个缩放效果,代码如下:
代码非常的简单,就是缩放FlutterLogo的大小,实现的效果如下图所示:
既然我们已经了解这么多事件,不妨多来一个事件,也就是App中常用的拖拽操作,代码如下(略微改改上上面的代码就行):
仅仅改变了事件的代码,前面说过onPanUpdate与onScaleUpdate不能同时存在,所以不能直接添加事件,需要删除onScaleUpdate后在添加。
Notification是“通知”的意思,这和Android中不一样。在Flutter里,Notification会沿着当前的context节点从下往上传递,所有父节点都可以通过NotificationListener来监听通知,这种由子向父的传递方式,我们称为“通知冒泡”,并继承至Notification,而父Widget使用NotificationListener进行监听并捕获通知。常用的NotificatioListener有LayoutChangeNotification,SizeChangedLayoutNotifier,ScrollNotification等。比如本篇将监听ListView滚动状态:是通过NotificationListener里的onNotification回调方法来判断状态。代码如下:
实现效果如下图所示,代码很好理解,这里就不在赘述了: