如需转载,请注明出处:Flutter学习笔记(33)--GestureDetector手势识别

这篇随笔主要记录的学习内容是GestureDetector手势识别,内容包括识别单击、双击、长按、组件拖拽和缩放处理。

  • 单击、双击、长按

先看下demo,很简单,GestureDetector本身也是一个组件,GestureDetector识别其内部子组件的手势动作,GestureDetector的构造方法内给我们提供了onTap单击、onDoubleTap双击、onLongPress长按的是回调方法。

识别到用户的手势操作后会执行对应的回调方法,demo的处理就是简单的更新一下text的文案。

import 'package:flutter/material.dart';

class GestureDetectorDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _GestureDetectorDemo();
}
} class _GestureDetectorDemo extends State {
String _operation = "No Gesture detected!"; //保存事件名
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GestureDetectorDemo',
home: new Scaffold(
appBar: AppBar(
title: Text('GestureDetectorDemo'),
leading: Icon(Icons.arrow_back),
),
body: new GestureDetector(
child: Container(
alignment: Alignment.center,
color: Colors.red,
width: ,
height: ,
child: Text(
_operation,
style: TextStyle(color: Colors.teal),
),
),
onTap: () => setState(() => _operation = 'onTap'),//单机回调
onDoubleTap: () => setState(() => _operation = 'onDoubleTap'),//双击回调
onLongPress: () => setState(() => _operation = 'onLongPress'),//长按回调
),
),
);
}
}

注:这里要说明一下,如果同时监听的onTap和onDoubleTap这两个事件的话,onTap会有200ms的延时,因为因为用户在点击一次之后很有可能会再点击一次来触发双击的事件,所以GestureDetector会等一段时间来确定用户是不是要双击,如果只是监听了onTap而没有监听onDoubleTap的话,就不会有延时了。

  • 组件拖动

老样子先看demo再讲解:

import 'package:flutter/material.dart';

class GestureDragDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _GestureDragDemoState();
}
} class _GestureDragDemoState extends State<GestureDragDemo> {
double _top = 0.0; //距离顶部的偏移量
double _left = 0.0; //距离底部的偏移量
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GestureDragDemo',
home: Scaffold(
appBar: AppBar(
title: Text('GestureDragDemo'),
leading: Icon(Icons.keyboard_backspace),
),
body: Stack(
children: <Widget>[
Positioned(
top: _top,
left: _left,
child: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text(
'A',
style: TextStyle(color: Colors.white),
),
),
onPanDown: (DragDownDetails downDetails) {
//手指按下时会执行此回调
// print('手指按下的位置:$downDetails.globalPosition');
},
onPanUpdate: (DragUpdateDetails dragUpdateDetails) {
//手指滑动时会执行次回调
setState(() {
//手指滑动时会多次触发onPanUpdate回调,更新偏移量并重新绘制
//dragUpdateDetails.delta.dx获取y轴方向的偏移量
_top += dragUpdateDetails.delta.dy;
//dragUpdateDetails.delta.dy获取x轴方向的偏移量
_left += dragUpdateDetails.delta.dx;
});
},
onPanEnd: (DragEndDetails dragEndDetails) {
//打印滑动结束时在x、y轴上的速度
// print(dragEndDetails.velocity);
},
),
),
],
)),
);
}
}
  • DragDownDetails.globalPosition:当用户按下时,此属性为用户按下的位置相对于屏幕(而非父组件)原点(左上角)的偏移。
  • DragUpdateDetails.delta:当用户在屏幕上滑动时,会触发多次Update事件,delta指一次Update事件的滑动的偏移量。
  • DragEndDetails.velocity:该属性代表用户抬起手指时的滑动速度(包含x、y两个轴的),示例中并没有处理手指抬起时的速度,常见的效果是根据用户抬起手指时的速度做一个减速动画。

也很简单,我们主要看下onPanUpdate这个回调方法,在我们手指滑动的过程中,会多次执行这个回调,在回调中我们处理下x、y方向的偏移量让后重新绘制就ok了。

偏移量打印:

  • 单一方向拖动

上面的拖动是可以往任意方向拖动的,在日常的开发中,有可能会遇到只允许水平(拼图验证)或竖直方向上进行拖动,DestureDetector也为我们提供了对应的响应事件:

看下demo示例:

import 'package:flutter/material.dart';

class GestureDragDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _GestureDragDemoState();
}
} class _GestureDragDemoState extends State<GestureDragDemo> {
double _top = 0.0; //距离顶部的偏移量
double _left = 0.0; //距离底部的偏移量
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GestureDragDemo',
home: Scaffold(
appBar: AppBar(
title: Text('GestureDragDemo'),
leading: Icon(Icons.keyboard_backspace),
),
body: Stack(
children: <Widget>[
Positioned(
top: _top,
left: _left,
child: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text(
'A',
style: TextStyle(color: Colors.white),
),
),
onPanDown: (DragDownDetails downDetails) {
//手指按下时会执行此回调
// print('手指按下的位置:$downDetails.globalPosition');
},
// onPanUpdate: (DragUpdateDetails dragUpdateDetails) {
// //手指滑动时会执行次回调
// setState(() {
// //手指滑动时会多次触发onPanUpdate回调,更新偏移量并重新绘制
// //dragUpdateDetails.delta.dx获取y轴方向的偏移量
// _top += dragUpdateDetails.delta.dy;
// print('Y:$dragUpdateDetails.delta.dy');
// //dragUpdateDetails.delta.dy获取x轴方向的偏移量
// _left += dragUpdateDetails.delta.dx;
// print('X:$dragUpdateDetails.delta.dx');
// });
// },
onHorizontalDragUpdate: (DragUpdateDetails dragUpdateDetails){
setState(() {
_left += dragUpdateDetails.delta.dx;
});
},
onPanEnd: (DragEndDetails dragEndDetails) {
//打印滑动结束时在x、y轴上的速度
// print(dragEndDetails.velocity);
},
),
),
],
)),
);
}
}
  • 缩放
import 'package:flutter/material.dart';

class GestureScaleDemo extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _GestureScaleDemoState();
}
} class _GestureScaleDemoState extends State {
double _width = 200.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GestureScaleDemo',
home: Scaffold(
appBar: AppBar(
title: Text('GestureScaleDemo'),
),
body: Center(
child: GestureDetector(
child: Image.asset('images/banner.png',width: _width),
onScaleUpdate: (ScaleUpdateDetails scaleUpdateDetails){
setState(() {
//缩放倍数在0.8到10倍之间
_width=*scaleUpdateDetails.scale.clamp(., 10.0);
});
},
),
),
),
);
}
}

Flutter学习笔记(33)--GestureDetector手势识别的更多相关文章

  1. Flutter学习笔记(36)--常用内置动画

    如需转载,请注明出处:Flutter学习笔记(36)--常用内置动画 Flutter给我们提供了很多而且很好用的内置动画,这些动画仅仅需要简单的几行代码就可以实现一些不错的效果,Flutter的动画分 ...

  2. Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗

    如需转载,请注明出处:Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗 功能点: 1.更新弹窗UI 2.强更与非强更且别控制 3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消 ...

  3. Flutter学习笔记(3)--Dart变量与基本数据类型

    一.变量 在Dart里面,变量的声明使用var.Object或Dynamic关键字,如下所示: var name = ‘张三’: 在Dart语言里一切皆为对象,所以如果没有将变量初始化,那么它的默认值 ...

  4. Flutter学习笔记(4)--Dart函数

    如需转载,请注明出处:Flutter学习笔记(4)--Dart函数 Dart是一个面向对象的语言,所以函数也是对象,函数属于Function对象,函数可以像参数一样传递给其他函数,这样便于做回调处理: ...

  5. Flutter学习笔记(5)--Dart运算符

    如需转载,请注明出处:Flutter学习笔记(5)--Dart运算符 先给出一个Dart运算符表,接下来在逐个解释和使用.如下:                            描述       ...

  6. Flutter学习笔记(6)--Dart异常处理

    如需转载,请注明出处:Flutter学习笔记(6)--Dart异常处理 异常是表示发生了意外的错误,如果没有捕获异常,引发异常的隔离程序将被挂起,并且程序将被终止: Dart代码可以抛出并捕获异常,但 ...

  7. Flutter学习笔记(8)--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  8. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  9. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

随机推荐

  1. vue滑动位移动画

    需要用到css3,vue过度 在网上找了很久很少的资料,自己摸索了一会看了官方文档,毕竟环境不同,需要的效果不同,耽误了很久 鼠标放上某一个就会从下方弹出层

  2. Unity设置应用后台运行

  3. [Firefox附加组件]0001.入门

    Firefox 火狐浏览器,拥有最快.最安全的上网体验,并且火狐拥有超过一万个的 扩展(add-ons),提供各种不同的扩展功能,您可以简单的下载.安装这些扩展以增强您的火狐功能,帮助您更好.更个性化 ...

  4. python 03—字符串分割

    字符串分割 例:sentenc = "I am an Englist sentenc" sentence.split() split()把字符串按照空格进行分割,所以得到的结果是 ...

  5. 【转】DataFrame合并

    参考:python 把几个DataFrame合并成一个DataFrame——merge,append,join,conca 横向合并(扩展列):merge,类似SQL的join,内连接,外连接等. 纵 ...

  6. Shellshock漏洞复现

    漏洞分析: exp: curl -A "() { :; }; echo; /bin/cat /etc/passwd" http://172.16.20.134:8080/victi ...

  7. STM32与匿名上位机通信——使用串口DMA实现

    背景:匿名上位机功能强大,这里想要采用匿名上位机输出一些调试信息,以波形的形式显示,方便观察和调试. 平台: 硬件:STM32F405RGT6 通信:2.4G zigbee无线串口收发模块 CC253 ...

  8. pix三接口配置

    拓扑 R1 R1#conf t Enter configuration commands, one per line. End with CNTL/Z. R1(config)#int f0/0 R1( ...

  9. 啪啪,打脸了!领导说:try-catch必须放在循环体外!

    哈喽,亲爱的小伙伴们,技术学磊哥,进步没得说!欢迎来到新一期的性能解读系列,我是磊哥. 今天给大家带来的是关于 try-catch 应该放在循环体外,还是放在循环体内的文章,我们将从性能和业务场景分析 ...

  10. Rocket - jtag - JtagShifter

    https://mp.weixin.qq.com/s/pHtrlmSCPqzlDdfj3qkNPQ 简单介绍JtagShifter的实现. 1. 简单介绍 实现移位寄存器链,包含并行Capture和U ...