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

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

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

Flutter系列博文链接 ↓:

工具安装:

  • Flutter从配置安装到填坑指南详解

Flutter基础篇:

  • 谷歌Flutter1.0正式版发布
  • Flutter基础篇(1)– 跨平台开发框架和工具集锦
  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法
  • Flutter基础篇(3)– Flutter基础全面详解
  • Flutter基础篇(4)– Flutter填坑全面总结
  • Flutter基础篇(5)– Flutter代码模板,解放双手,提高开发效率必备
  • Flutter基础篇(6)– 水平和垂直布局详解
  • Flutter基础篇(7)– Flutter更新错误全面解决方案(图文+视频讲解)
  • Flutter基础篇(8)– Flutter for Web详细介绍
  • Flutter基础篇(9)– 手把手教你用Flutter实现Web页面编写
  • Flutter1.9升级体验总结(Flutter Web 1.9最新版本填坑指南)

Flutter进阶篇:

  • Flutter进阶篇(1)– 手把手带你快速上手调试Flutter项目
  • Flutter进阶篇(2)– Flutter路由详解
  • Flutter进阶篇(3)– Flutter 的手势(GestureDetector)分析详解
  • Flutter进阶篇(4)– Flutter的Future异步详解
  • Flutter进阶篇(5)– 使用Flutter创建插件详解并发布到Pub库
  • Flutter进阶篇(6)– PageStorageKey、PageStorageBucket和PageStorage使用详解
  • Flutter进阶篇(7)– Flutter路由轻量级框架FRouter
Dart语法系列博文链接 ↓:

Dart语法基础篇:

  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法(这是Dart语法系列的第一篇)
  • Dart的语法详解系列篇(二)– 类与函数
  • Dart的语法详解系列篇(三)– mixin入门
  • Dart的语法详解系列篇(四)– 泛型、异步、库等有关详解
  • Dart2.6正式版发布,支持编译为native可执行文件

Dart语法进阶篇:

  • Dart语法进阶篇(一)– Dart源码的排序算法详解

目录:

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



一、手势识别器分类

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

分别是:

Tap:

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

双击:

onDoubleTap: () {},

长按:

onLongPress: () {},
onLongPressStart: () {},
onLongPressMoveUpdate: () {},
onLongPressUp: () {},
onLongPressEnd: () {},

垂直滑动:

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) {},

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

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

frc 8cd41097a6d89dc4e78e4feda63e9d0a - Flutter进阶篇(3)-- Flutter 的手势(GestureDetector)分析详解
手势识别器最新内容.png

我们可以得到几点信息:

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