Flutter进阶篇(3)-- Flutter 的手势(GestureDetector)分析详解

96
AWeiLoveAndroid 11f8cfa8 ec9f 4f82 be92 d6a39f61b5c1
16.8 2018.11.13 23:29* 字数 1721

声明:本文是作者AWeiLoveAndroid原创,版权归作者AWeiLoveAndroid所有,侵权必究。如若转发,请注明作者和来源地址!未经授权,严禁私自转载!

今天详细讲解一下Flutter中的GestureDetector。


Flutter系列博文链接 ↓:

工具安装:

Flutter基础篇:

Flutter进阶篇:

Dart语法系列博文链接 ↓:

目录:

一、手势识别器分类
二、手势识别器的相关闭包函数统计分析
三、各种手势识别器的使用详解
四、手势识别器混合使用
五、手势识别器使用时遇到的坑



一、手势识别器分类

GestureDetector手势操作是开发中必不可少的,Flutter中的GestureDetector一共有 7大类25种

分别是:

Tap:

onTapDown: (details) {},
onTapUp: (details) {},
onTap: () {},
onTapCancel: () {},

双击:

onDoubleTap: () {},

长按:

onLongPress: () {},
onLongPressUp: () {},

垂直滑动:

onVerticalDragDown: (details) {},
onVerticalDragStart: (details) {},
onVerticalDragUpdate: (details) {},
onVerticalDragEnd: (details) {},
onVerticalDragCancel: () {},

水平滑动:

onHorizontalDragDown: (details) {},
onHorizontalDragStart: (details) {},
onHorizontalDragUpdate: (details) {},
onHorizontalDragEnd: (details) {},
onHorizontalDragCancel: () {},

Pan事件:

指针已接触屏幕并可能开始移动。
onPanDown: (details) {},
指针已经接触屏幕并开始移动。
onPanStart: (details) {},
与屏幕接触并移动的指针再次移动。
onPanUpdate: (details) {}, 
先前与屏幕接触并移动的指针不再与屏幕接触,并且当它停止接触屏幕时以特定速度移动。
onPanEnd: (details) {},
先前触发 onPanDown 的指针未完成。
onPanCancel: () {},

Scale事件:

onScaleStart: (details) {},
onScaleUpdate: (details) {},
onScaleEnd: (details) {},

二、手势识别器的相关闭包函数统计分析表:

我查看了一下每一个事件类型源码,做了一张图,如下所示:

我们可以得到几点信息:

Flutter进阶
Gupao