监听手指是否离开屏幕android_Flutter事件监听

726454d11ca64962fa668ad7ec532091.png

一. 事件监听

在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击、手指滑动、双击、长按等等。
所有内容首发于公众号:coderwhy

在Flutter中,手势有两个不同的层次:

  • 第一层:原始指针事件(Pointer Events):描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。
  • 第二层:手势识别(Gesture Detector):这个是在原始事件上的一种封装。
    • 比如我们要监听用户长按,如果自己封装原始事件我们需要监听从用户按下到抬起的时间来判断是否是一次长按事件;
    • 比如我们需要监听用户双击事件,我们需要自己封装监听用户两次按下抬起的时间间隔;
    • 幸运的是各个平台几乎都对它们进行了封装,而Flutter中的手势识别就是对原始指针事件的封装;
    • 包括哪些手势呢?比如点击、双击、长按、拖动等

2.1. 指针事件Pointer

Pointer 代表的是人机界面交互的原始数据。一共有四种指针事件:

  • PointerDownEvent 指针在特定位置与屏幕接触
  • PointerMoveEvent 指针从屏幕的一个位置移动到另外一个位置
  • PointerUpEvent 指针与屏幕停止接触
  • PointerCancelEvent 指针因为一些特殊情况被取消

Pointer的原理是什么呢?

  • 在指针落下时,框架做了一个 hit test 的操作,确定与屏幕发生接触的位置上有哪些Widget以及分发给最内部的组件去响应;
  • 事件会沿着最内部的组件向组件树的根冒泡分发;
  • 并且不存在用于取消或者停止指针事件进一步分发的机制;

原始指针事件使用Listener来监听:

class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Listener(child: Container(width: 200,height: 200,color: Colors.red,),onPointerDown: (event) => print("手指按下:$event"),onPointerMove: (event) => print("手指移动:$event"),onPointerUp: (event) => print("手指抬起:$event"),),);}
}

11fd7db1402b395edaa8ee66305c49e3.png

2.2. 手势识别Gesture

Gesture是对一系列Pointer的封装,官方建议开发中尽可能使用Gesture,而不是Pointer

b8b91aca4ff84b69d6c1472ed530e0f3.png

Gesture分层非常多的种类:

点击

  • onTapDown:用户发生手指按下的操作
  • onTapUp:用户发生手指抬起的操作
  • onTap:用户点击事件完成
  • onTapCancel:事件按下过程中被取消

双击:

  • onDoubleTap:快速点击了两次

长按:

  • onLongPress:在屏幕上保持了一段时间

纵向拖拽:

  • onVerticalDragStart:指针和屏幕产生接触并可能开始纵向移动;
  • onVerticalDragUpdate:指针和屏幕产生接触,在纵向上发生移动并保持移动;
  • onVerticalDragEnd:指针和屏幕产生接触结束;

横线拖拽:

  • onHorizontalDragStart:指针和屏幕产生接触并可能开始横向移动;
  • onHorizontalDragUpdate:指针和屏幕产生接触,在横向上发生移动并保持移动;
  • onHorizontalDragEnd:指针和屏幕产生接触结束;

移动:

  • onPanStart:指针和屏幕产生接触并可能开始横向移动或者纵向移动。如果设置了 onHorizontalDragStart 或者 onVerticalDragStart,该回调方法会引发崩溃;
  • onPanUpdate:指针和屏幕产生接触,在横向或者纵向上发生移动并保持移动。如果设置了 onHorizontalDragUpdate 或者 onVerticalDragUpdate,该回调方法会引发崩溃。
  • onPanEnd:指针先前和屏幕产生了接触,并且以特定速度移动,此后不再在屏幕接触上发生移动。如果设置了 onHorizontalDragEnd 或者 onVerticalDragEnd,该回调方法会引发崩溃。

从Widget的层面来监听手势,我们需要使用:GestureDetector

  • 当然,我们也可以使用RaisedButton、FlatButton、InkWell等来监听手势
  • globalPosition用于获取相对于屏幕的位置信息
  • localPosition用于获取相对于当前Widget的位置信息
class HYHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("手势测试"),),body: GestureDetector(child: Container(width: 200,height: 200,color: Colors.red,),onTap: () {},onTapDown: (detail) {print(detail.globalPosition);print(detail.localPosition);},onTapUp: (detail) {print(detail.globalPosition);print(detail.localPosition);}),);}
}

5b73f799f67fb76cba42ddab47303188.png

二. 跨组件事件

在组件之间如果有事件需要传递,一方面可以一层层来传递,另一方面我们也可以使用一个EventBus工具来完成。

其实EventBus在Vue、React中都是一种非常常见的跨组件通信的方式:

  • EventBus相当于是一种订阅者模式,通过一个全局的对象来管理;
  • 这个EventBus我们可以自己实现,也可以使用第三方的EventBus;

这里我们直接选择第三方的EventBus:

dependencies:event_bus: ^1.1.1

第一:我们需要定义一个希望在组件之间传递的对象:

  • 我们可以称之为一个时间对象,也可以是我们平时开发中用的模型对象(model)
class UserInfo {String nickname;int level;UserInfo(this.nickname, this.level);
}

第二:创建一个全局的EventBus对象

final eventBus = EventBus();

第三:在某个Widget中,发出事件:

class HYButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return RaisedButton(child: Text("HYButton"),onPressed: () {final info = UserInfo("why", 18);eventBus.fire(info);},);}
}

第四:在某个Widget中,监听事件

class HYText extends StatefulWidget {@override_HYTextState createState() => _HYTextState();
}class _HYTextState extends State<HYText> {String message = "Hello Coderwhy";@overridevoid initState() {super.initState();eventBus.on<UserInfo>().listen((data) {setState(() {message = "${data.nickname}-${data.level}";});});}@overrideWidget build(BuildContext context) {return Text(message, style: TextStyle(fontSize: 30),);}
}
备注:所有内容首发于公众号,之后除了Flutter也会更新其他技术文章,TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等,也会更新一些自己的学习心得等,欢迎大家关注

84b3d02db311b7ec23559fc83f8e6927.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/503870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab二维数组最小值出错,矩阵求最小值问题 问题是: 错误使用空矩形矩阵进行赋值...

我现在有一组数据 当然其实是有很多数据了 已经上万 只截取了其中一部分假设 【X Y W】32.8876000000000 26.6148000000000 1.0101000000000032.9319000000000 28.8627000000000 1.0099600000000032.9803000000000 31.30950000000…

android运行别人的项目_导入他人的Android工程

Android应用界面开发第一章学习第三部分####1.导入其它人创建的Android Studio项目(重点在第二部分)首先将下载的Project压缩包解压到自己的AS工程目录比如&#xff1a;工程目录然后打开AS软件&#xff0c;关闭其它工程(close project)&#xff0c;然后准备导入刚才解压的文件夹…

@excel注解_Excel导入导出Java解决方案推荐

今天锋哥介绍一款Excel导入导出Java解决方案Easy-POI&#xff0c;以前我们用POI&#xff0c;麻烦点&#xff0c;Easy-POI是封装好的&#xff0c;用起来Easy点&#xff0c;封装过&#xff0c;性能好&#xff0c;所以大伙有空可以研究下&#xff1b;Easy-POIEasy-POI是一款Excel导…

wind 下装mysql,windows 下安装MySQL

下载压缩包首先到官网下载安装包,可联系提供配置环境变量找到系统属性(windows10在高级系统设置)在这里插入图片描述找到系统变量的 Path 点击编辑在这里插入图片描述点击新建&#xff0c;然后添加进去自己压缩包位置的bin目录在这里插入图片描述之后点击三个确当 (同时自动关闭…

javapanel根据内部组件_java gui中怎么用jpanel实现组件的绝对定位

展开全部相对定位是利用布局管理器GridBagLayout() 来实现的GridBagLayout 布局是根据GridBagConstraints() 来设定的GridBagConstraints主要有8个重要参数需要掌握非别62616964757a686964616fe58685e5aeb931333332613033是gridx,gridy —— 设置组件的位置&#xff0c;gridx…

打开word2007总是出现配置进度_实战经验:Word 2007每次打开都弹出正在配置

在一次清理注册表之后&#xff0c;发现每次打开Word 2007时&#xff0c;都会弹出”正在配置”的对话框。经过实验&#xff0c;发现可以使用如下的方法解决此问题&#xff1a;1) 打开cmd命令行2) 对于Word 2007&#xff0c;执行如下的指令&#xff1a;reg add HKCUSoftwareMicro…

Java 8中流Stream API详解

先给个示例&#xff0c;展示Java 8流API的优势 假设我们有以下任务&#xff1a; 给定一个字符串列表&#xff0c;我们需要执行以下操作&#xff1a; 筛选出所有以"A"开头的字符串。 将这些字符串转换为大写。 对这些字符串按照长度进行排序。 最后&#xff0c;将…

短信宝 php使用,[php] 使用 短信宝 发送短信(thinkphp)

/*** SmsBao实现类* category Think* package Think* subpackage Sms*/classSmsBao {private$account;//短信包账户private$password;//密码private$balance;//短信剩余条数constsendSmsUrl "http://api.smsbao.com/sms";constqueryBalanceUrl "http://api.smsb…

chrome github上不去 mac_码农大叔打赌,github上快速搜索优质开源项目,这些技能你不懂?...

GitHub的流行&#xff0c; GitHub在开源世界的受欢迎程度自不必多言。再加上今天&#xff0c;GitHub官方又搞了个大新闻&#xff1a;私有仓库也改为免费使用&#xff0c;这在原来可是需要真金白银的买的。可见微软收购后&#xff0c;依然没有改变 GitHub 的定位&#xff0c;甚至…

matlab保存数据到excel_Excel意外退出数据未保存?这个方法可以帮你找回所有数据...

老师们每天都需要完成大量的教学工作&#xff0c;且他们的每一个工作都是跟文字或数据打交道&#xff0c;Excel也逐渐成为了大家日常办公中的必备软件。在利用Excel办公时&#xff0c;通常是这么一个操作流程——新建、编辑、保存。编辑的时间可能是几分钟&#xff0c;也可能是…

c 调用matlab文件路径,C/C++下调用matlab函数操作说明

1.matlab的安装连接&#xff1a;http://pan.baidu.com/s/1qXuF7aO安装32位版本的matlab(在目录下bin文件夹中有两个文件夹&#xff0c;选择win32文件夹下的setup进行安装)2.matlab mex编译器配置安装完matlab之后&#xff0c;需要设定对应的c编译器才能编译.m文件生成可供c调用…

linux tomcat环境变量配置_Tomcat

Tomcat介绍1.Web服务器介绍Web服务器可以解析HTTP协议&#xff0c;收到请求后可以进行响应&#xff0c;比如响应静态资源、进行页面跳转等Web服务器响应可委托给CGI脚本、JSP脚本、ASP脚本、服务器端JS等程序或其它服务器端技术Web服务器通常产生一个html响应以便浏览器浏览2.常…

desktop docker 无法卸载_Docker容器无法停止或移除-权限被拒绝错误

问题 &#xff1a;无法停止泊坞窗容器&#xff0c;每当我尝试停止容器时&#xff0c;都会收到以下错误消息&#xff0c;ERROR: for yattyadocker_web_1 cannot stop container: 1f04148910c5bac38983e6beb3f6da4c8be3f46ceeccdc8d7de0da9d2d76edd8: Cannot kill container 1f04…

oracle crs 命令,ORACLE RAC CRSCTL 命令使用 及 执行的用户

oracle rac crsctl命令使用查看crs资源状态[griddb1 ~]$ crs_stat -tName Type Target State Host------------------------------------------------------------ora.DATA.dg ora....up.type ONLINE ONLINE db1ora.FRA.dg ora....up.type ONLINE ONLINEdb1ora....ER.…

一直未运行_【直击一线】延一转三相分离器投运成功,盘活全区生产运行一盘棋...

喜 讯4月30日上午17点30点&#xff0c;新安边作业区延一接转注水站上新更换的三相分离器一次投运成功&#xff0c;这个好消息不胫而走传遍了全区收获获赞声一片&#xff0c;这也是对连日来奋战在施工作业现场的新安边人最大的褒奖。 延一接转注水站全貌延一接转注水站是新安边…

python字符串长度_在python中如何获取字符串的长度

python中如何获取字符串的长度&#xff1f;本篇文章就给大家介绍4种在python中计算并输出字符串长度的方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你们有所帮助。 Python中的字符串是Unicode代码点的不可变序列。给定一个字符串&#xff0c…

python的py文件打包成exe_将python项目.py文件打包成.exe文件

安装pyinstaller包pip3 install pyinstaller如果不行pip3 install pyinstaller -i https://pypi.doubanio.com/simple准备一个你要打包的.py文件&#xff0c;cd到该文件路径下&#xff0c;打开cmd在命令行中输入&#xff1a;pyinstaller -F xxx.py或者pyinstaller.exe -F xxx.p…

python处理字典的方法_python字典的常用操作方法小结

Python字典是另一种可变容器模型(无序)&#xff0c;且可存储任意类型对象&#xff0c;如字符串、数字、元组等其他容器模型。本文章主要介绍Python中字典(Dict)的详解操作方法,包含创建、访问、删除、其它操作等,需要的朋友可以参考下。 字典由键和对应值成对组成。字典也被称作…

oracle rowed,oracle bitmap索引内部揭密,欢迎补充

位图(bitmap)索引是另外一种索引类型&#xff0c;它的组织形式与B树索引相同&#xff0c;也是一棵平衡树。与B树索引的区别在于叶子节点里存放索引条目的方式不同。从前面我们知道&#xff0c;B树索引的叶子节点里&#xff0c;对于表里的每个数据行&#xff0c;如果被索引列的值…

linux 谷歌浏览器设置代理_linux下chrome+Proxy Switchy+ssh和firefox+autoproxy+ssh | 学步园...

继之前firefoxautoproxytorprivoxy失效之后&#xff0c;找到了更简单更快速的ssh代理方法&#xff1a;chromeProxy Switchyssh和firefoxautoproxyssh。两种方法都需要一个ssh用户&#xff0c;到这里免费申请&#xff1a;http://www.cjb.net/cgi-bin/shell.cgi?actionsignup。1…