如需转载,请注明出处: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. IDEA奇淫小技巧

    IDEA是目前市场上最好用的IDE,我说的! 前几年eclipse在市场上非常流行,因此大多数人都习惯了eclipse的一些快捷键.近年来,随着IDEA的兴起,很多人都放弃了exlipse,进而选择了 ...

  2. 使用cxfreeze打包成exe文件

    旧版本下载链接地址python3.4以下的:https://www.lfd.uci.edu/~gohlke/pythonlibs/#cx_freeze 最新版本python3.5以上直接使用  pip ...

  3. 50个SQL语句(MySQL版) 问题六

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  4. AES实现财务数据的加密解密存储

    需求背景 众所周知,金融行业有各种各样的财务报表,有些报表涉及到公司财务或经营相关的敏感数据,需要进行加密存储,只有掌握密钥的用户才能看到解密后的数据.注意,这里所说的加密并不是针对整个数据库或者表全 ...

  5. Java实现 蓝桥杯 基础练习 字母图形

    基础练习 字母图形 时间限制:1.0s 内存限制:256.0MB 提交此题 锦囊1 锦囊2 问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCD ...

  6. Java实现 蓝桥杯 算法提高 队列操作

    算法提高 队列操作 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 ...

  7. Java实现 洛谷 P1426 小鱼会有危险吗

    import java.util.LinkedList; import java.util.Scanner; public class Main { private static Scanner ci ...

  8. java实现数字黑洞

    任意一个 5 位数,比如:34256,把它的各位数字打乱,重新排列,可以得到 一个最大的数:65432,一个最小的数 23456. 求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不 ...

  9. java实现奇怪的比赛

    ** 奇怪的比赛** 某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答10个问题(其编号为1到10),越后面越有难度.答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必 ...

  10. java实现第九届蓝桥杯全排列

    全排列 对于某个串,比如:"1234",求它的所有全排列. 并且要求这些全排列一定要按照字母的升序排列. 对于"1234",应该输出(一共4!=24行): 12 ...