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: <Widget>[

    •    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中添加资源和图片 1年以前  |  2155次阅读
发布Flutter开发的iOS程序 1年以前  |  1510次阅读
Flutter的手势GestureDetector分析详解 10月以前  |  1460次阅读
Flutter插件详解及其发布插件 10月以前  |  1318次阅读
Flutter Widget框架概述 1年以前  |  1304次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1260次阅读
使用Inspector检查用户界面 1年以前  |  1186次阅读
JSON和序列化 1年以前  |  1168次阅读
Flutter框架概览 1年以前  |  1114次阅读
为Flutter应用程序添加交互 1年以前  |  1078次阅读
使用自定义字体 1年以前  |  1068次阅读
Flutter 状态管理指南之 Provider 10月以前  |  1018次阅读
处理文本输入 1年以前  |  957次阅读
Flutter for Web详细介绍 10月以前  |  910次阅读
发布Flutter开发的Android程序 1年以前  |  893次阅读
使用包来开发Flutter应用 1年以前  |  892次阅读
Flutter路由详解 10月以前  |  890次阅读
编写国际化Flutter App 1年以前  |  865次阅读