Flutter的手势GestureDetector分析详解

前言

                前面的文章我们介绍了Flutter的一些基础知识点,Flutter布局,Flutter路由,今天来详细的讲一下Flutter的手势识别器。

在我们的App开发中,手势操作是必不可少的步骤,我们可以通过手势操作实现各种交互,也可以通过手势识别器的回调监听获得相关的触摸反馈信息和数据,以便相关功能开发中可以使用到这些数据。

熟练掌握手势识别器对于开发有着很重大的影响。下面就开始详细讲解一下手势识别器(GestureDetector)的知识点。

    感谢有你

今天是感恩节,首先在这里感谢各位朋友们一直默默关注着我的公众号。我会继续坚持初心,为大家分享更多的干货好文。希望大家多多关注。有了你们的支持我会更坚定不移的走下去。

本文的源码发布在GitHub上,如果有什么问题,欢迎留言。        

https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

      1

手势识别器的分类

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

2

闭包函数属性详细图解

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

我们可以得到几点信息:

★ (1)双击和长按事件不需要传入闭包函数。

★ (2)垂直滑动、水平滑动、Pan事件的闭包函数是一样的,它们几个的事件生命周期函数都是一样的。

★ (3)Tap 和 Scale传入的闭包函数不一样。

所以我图中使用了三种不同颜色表示,便于区分。

3

手势的使用

在Flutter里面,手势操作有以下三种情况:

组件自带有手势操作回调函数,优先使用改手势操作。

例如 ListView、RaisedButton 等组件自带有点击事件。

RsisedButton使用示例:

    - `new RaisedButton(` - `  onPressed: () {` - `    print('onPressed');` - `  },` - `);`

  ListView使用示例:

    - `new ListView(` - `  children: [` - `    new ListTile(` - `      onTap: () {` - `        print('onTap');` - `      },` - `      onLongPress: () {` - `        print('onLongPress');` - `      },` - `    ),` - `  ],` - `);`

组件如果没有手势操作回调函数,可以使用Ink或者InkWell包裹组件,实现点击时的水波纹效果。

使用 Ink 包裹可以实现点击效果,但是没有相关回调函数,不方便获取相关的点击坐标等信息。

例如:

    - `new Ink(` - `  child: new FlutterLogo(` - `    colors: Colors.teal,` - `    size: 150.0,` - `    curve: Curves.fastOutSlowIn,` - `    duration: new Duration(seconds: 3),` - `  ),` - `);`

使用 InkWell 包裹可以实现水波纹点击效果,并且可以获取相关的点击坐标等信息。(推荐使用)

    - `new InkWell(` - `  child: new FlutterLogo(` - `    colors: Colors.teal,` - `    size: 150.0,` - `    curve: Curves.fastOutSlowIn,` - `    duration: new Duration(seconds: 3),` - `  ),` - `  onTap: () {` - `    print('click ==> onTap');` - `  },` - `  onTapDown: (TapDownDetails details) {` - `    print('click ==> onTapDown ${details.globalPosition}');` - `  },` - `  onLongPress: () {` - `    print('click ==> onLongPress');` - `  },` - `  onDoubleTap: () {` - `    print('click ==> onDoubleTap');` - `  },` - `  onTapCancel: () {` - `    print('click ==> onTapCancel');` - `  },` - `  onHighlightChanged: (bool value) {` - `    print('click ==> onHighlightChanged ${value}');` - `  },` - `);`

组件如果没有手势操作回调函数,可以使用GestureDetector包裹组件。

下面是GestureDetecor的详细使用示例:(后文会针对这个做详细讲解。)每一个回调函数都是一个事件类型。

    - `new GestureDetector(` - `  child: new FlutterLogo(` - `    colors: Colors.teal,` - `    size: 150.0,` - `    curve: Curves.fastOutSlowIn,` - `    duration: new Duration(seconds: 3),` - `  ),` - `  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: () {},` - `  onPanDown: (details) {},` - `  onPanStart: (details) {},` - `  onPanUpdate: (details) {},` - `  onPanEnd: (details) {},` - `  onPanCancel: () {},` - `  onScaleStart: (details) {},` - `  onScaleUpdate: (details) {},` - `  onScaleEnd: (details) {},` - `);`

由于内容过多,为了方便阅读和理解,我这里分两篇描述。希望大家能够谅解。

         


本文版权归扣丁书屋所有,转载请保留此说明。



所属标签

无标签

官方入门指南

Flutter官方发布的入门指导,包括了如何在不同的平台(Windows, Mac, Linux)上搭建开发环境,以及一些入门级的指导,以便您从零开始进入Flutter的世界,同时,一些Flutter的框架API,也是您开发时必不可少的工具书。

从这里进入