Flutter（八）事件处理与通知

1.原始指针事件处理

一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。

Listener 组件

Flutter中可以使用Listener来监听原始触摸事件

Listener({Key key,this.onPointerDown, //手指按下回调this.onPointerMove, //手指移动回调this.onPointerUp,//手指抬起回调this.onPointerCancel,//触摸事件取消回调this.behavior = HitTestBehavior.deferToChild, //先忽略此参数，后面小节会专门介绍Widget child
})

示例：手指在一个容器上移动时查看手指相对于容器的位置

class _PointerMoveIndicatorState extends State<PointerMoveIndicator> {PointerEvent? _event;@overrideWidget build(BuildContext context) {return Listener(child: Container(alignment: Alignment.center,color: Colors.blue,width: 300.0,height: 150.0,child: Text('${_event?.localPosition ?? ''}',style: TextStyle(color: Colors.white),),),onPointerDown: (PointerDownEvent event) => setState(() => _event = event),onPointerMove: (PointerMoveEvent event) => setState(() => _event = event),onPointerUp: (PointerUpEvent event) => setState(() => _event = event),);}
}

PointerEvent常用属性：

  • position：它是指针相对于当对于全局坐标的偏移。
  • localPosition: 它是指针相对于当对于本身布局坐标的偏移。
  • delta：两次指针移动事件（PointerMoveEvent）的距离。
  • pressure：按压力度，如果手机屏幕支持压力传感器(如iPhone的3D Touch)，此属性会更有意义，如果手机不支持，则始终为1。
  • orientation：指针移动方向，是一个角度值。

忽略指针事件

不想让某个子树响应PointerEvent的话，我们可以使用IgnorePointer和AbsorbPointer，AbsorbPointer本身是可以接收指针事件的(但其子树不行)，而IgnorePointer不可以

Listener(child: AbsorbPointer(child: Listener(child: Container(color: Colors.red,width: 200.0,height: 100.0,),onPointerDown: (event)=>print("in"),),),onPointerDown: (event)=>print("up"),
)

点击Container时，由于它在AbsorbPointer的子树上，所以不会响应指针事件，所以日志不会输出"in"，
但AbsorbPointer本身是可以接收指针事件的，所以会输出"up"。

如果将AbsorbPointer换成IgnorePointer，那么两个都不会输出。

2.手势识别

GestureDetector和GestureRecognizer

点击、双击、长按

通过GestureDetector对Container进行手势识别，触发相应事件后，在Container上显示事件名

class _GestureTestState extends State<GestureTest> {String _operation = "No Gesture detected!"; //保存事件名@overrideWidget build(BuildContext context) {return Center(child: GestureDetector(child: Container(alignment: Alignment.center,color: Colors.blue,width: 200.0,height: 100.0,child: Text(_operation,style: TextStyle(color: Colors.white),),),onTap: () => updateText("Tap"), //点击onDoubleTap: () => updateText("DoubleTap"), //双击onLongPress: () => updateText("LongPress"), //长按),);}void updateText(String text) {//更新显示的事件名setState(() {_operation = text;});}
}

拖动、滑动

拖动圆形字母A的示例：

class _Drag extends StatefulWidget {@override_DragState createState() => _DragState();
}class _DragState extends State<_Drag> with SingleTickerProviderStateMixin {double _top = 0.0; //距顶部的偏移double _left = 0.0;//距左边的偏移@overrideWidget build(BuildContext context) {return Stack(children: <Widget>[Positioned(top: _top,left: _left,child: GestureDetector(child: CircleAvatar(child: Text("A")),//手指按下时会触发此回调onPanDown: (DragDownDetails e) {//打印手指按下的位置(相对于屏幕)print("用户手指按下：${e.globalPosition}");},//手指滑动时会触发此回调onPanUpdate: (DragUpdateDetails e) {//用户手指滑动时，更新偏移，重新构建setState(() {_left += e.delta.dx;_top += e.delta.dy;});},onPanEnd: (DragEndDetails e){//打印滑动结束时在x、y轴上的速度print(e.velocity);},),)],);}
}

I/flutter ( 8513): 用户手指按下：Offset(26.3, 101.8)
I/flutter ( 8513): Velocity(235.5, 125.8)
  • DragDownDetails.globalPosition：当用户按下时，此属性为用户按下的位置相对于屏幕（而非父组件）原点(左上角)的偏移。
  • DragUpdateDetails.delta：当用户在屏幕上滑动时，会触发多次Update事件，delta指一次Update事件的滑动的偏移量。
  • DragEndDetails.velocity：该属性代表用户抬起手指时的滑动速度(包含x、y两个轴的）

单一方向拖动

GestureDetector可以只识别特定方向的手势事件，我们将上面的例子改为只能沿垂直方向拖动：

class _DragVertical extends StatefulWidget {@override_DragVerticalState createState() => _DragVerticalState();
}class _DragVerticalState extends State<_DragVertical> {double _top = 0.0;@overrideWidget build(BuildContext context) {return Stack(children: <Widget>[Positioned(top: _top,child: GestureDetector(child: CircleAvatar(child: Text("A")),//垂直方向拖动事件onVerticalDragUpdate: (DragUpdateDetails details) {setState(() {_top += details.delta.dy;});},),)],);}
}

缩放

class _Scale extends StatefulWidget {const _Scale({Key? key}) : super(key: key);@override_ScaleState createState() => _ScaleState();
}class _ScaleState extends State<_Scale> {double _width = 200.0; //通过修改图片宽度来达到缩放效果@overrideWidget build(BuildContext context) {return Center(child: GestureDetector(//指定宽度，高度自适应child: Image.asset("./images/sea.png", width: _width),onScaleUpdate: (ScaleUpdateDetails details) {setState(() {//缩放倍数在0.8到10倍之间_width=200*details.scale.clamp(.8, 10.0);});},),);}
}

GestureDetector内部是使用一个或多个GestureRecognizer来识别各种手势的，

而GestureRecognizer的作用就是通过Listener来将原始指针事件转换为语义手势，

GestureDetector直接可以接收一个子widget

示例：给一段富文本（RichText）的不同部分分别添加点击事件处理器，但是TextSpan并不是一个widget，这时我们不能用GestureDetector，但TextSpan有一个recognizer属性，它可以接收一个GestureRecognizer。

import 'package:flutter/gestures.dart';class _GestureRecognizer extends StatefulWidget {const _GestureRecognizer({Key? key}) : super(key: key);@override_GestureRecognizerState createState() => _GestureRecognizerState();
}class _GestureRecognizerState extends State<_GestureRecognizer> {TapGestureRecognizer _tapGestureRecognizer = TapGestureRecognizer();bool _toggle = false; //变色开关@overridevoid dispose() {//用到GestureRecognizer的话一定要调用其dispose方法释放资源_tapGestureRecognizer.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Center(child: Text.rich(TextSpan(children: [TextSpan(text: "你好世界"),TextSpan(text: "点我变色",style: TextStyle(fontSize: 30.0,color: _toggle ? Colors.blue : Colors.red,),recognizer: _tapGestureRecognizer..onTap = () {setState(() {_toggle = !_toggle;});},),TextSpan(text: "你好世界"),],),),);}
}

在这里插入图片描述

3.Flutter事件机制

事件分发过程很简单，即遍历HitTestResult，调用每一个节点的 handleEvent 方法，只需要重写 handleEvent 方法就可以处理事件了。

1.命中测试：当手指按下时，触发 PointerDownEvent 事件，按照深度优先遍历当前渲染（render object）树，对每一个渲染对象进行“命中测试”（hit test），如果命中测试通过，则该渲染对象会被添加到一个 HitTestResult 列表当中。
2.事件分发：命中测试完毕后，会遍历 HitTestResult 列表，调用每一个渲染对象的事件处理方法（handleEvent）来处理 PointerDownEvent 事件，该过程称为“事件分发”（event dispatch）。随后当手指移动时，便会分发 PointerMoveEvent 事件。
3.事件清理：当手指抬（ PointerUpEvent ）起或事件取消时（PointerCancelEvent），会先对相应的事件进行分发，分发完毕后会清空 HitTestResult 列表。

4.手势原理与手势冲突

手势发生变化时只需要在 pointerRouter中取出 GestureRecognizer 的 handleEvent 方法进行手势识别即可。一个手势只有一个手势识别器生效

1.每一个手势识别器（GestureRecognizer）都是一个“竞争者”（GestureArenaMember），当发生指针事件时，他们都要在“竞技场”去竞争本次事件的处理权，默认情况最终只有一个“竞争者”会胜出(win)。
2.GestureRecognizer 的 handleEvent 中会识别手势，如果手势发生了某个手势，竞争者可以宣布自己是否胜出，一旦有一个竞争者胜出，竞技场管理者（GestureArenaManager）就会通知其他竞争者失败。
3.胜出者的 acceptGesture 会被调用，其余的 rejectGesture 将会被调用。

如果对一个组件同时监听水平和垂直方向的拖动手势，当我们斜着拖动时哪个方向的拖动手势回调会被触发？实际上取决于第一次移动时两个轴上的位移分量，哪个轴的大，哪个轴在本次滑动事件竞争中就胜出

解决手势冲突

解决手势冲突的方法有两种：

1.使用 Listener。这相当于跳出了手势识别那套规则。
2.自定义手势手势识别器（ Recognizer）

通过 Listener 解决手势冲突的原因是竞争只是针对手势的，而 Listener 是监听原始指针事件，原始指针事件并非语义话的手势，所以根本不会走手势竞争的逻辑，所以也就不会相互影响

Listener(  // 将 GestureDetector 换位 Listener 即可onPointerUp: (x) => print("2"),child: Container(width: 200,height: 200,color: Colors.red,alignment: Alignment.center,child: GestureDetector(onTap: () => print("1"),child: Container(width: 50,height: 50,color: Colors.grey,),),),
);

代码很简单，只需将 GestureDetector 换位 Listener 即可，可以两个都换，也可以只换一个。可以看见，通过Listener直接识别原始指针事件来解决冲突的方法很简单，因此，当遇到手势冲突时，我们应该优先考虑 Listener 。

定义手势识别器的方式比较麻烦，原理是当确定手势竞争胜出者时，会调用胜出者的acceptGesture 方法，表示“宣布成功”，然后会调用其他手势识别其的rejectGesture 方法，表示“宣布失败”。

既然如此，我们可以自定义手势识别器（Recognizer），然后去重写它的rejectGesture 方法：在里面调用acceptGesture 方法，这就相当于它失败是强制将它也变成竞争的成功者了，这样它的回调也就会执行。

5.事件总线

一个需要登录的 App 中，页面会关注用户登录或注销事件，来进行一些状态更新。这时候，一个事件总线便会非常有用

//订阅者回调签名
typedef void EventCallback(arg);class EventBus {//私有构造函数EventBus._internal();//保存单例static EventBus _singleton = EventBus._internal();//工厂构造函数factory EventBus()=> _singleton;//保存事件订阅者队列，key:事件名(id)，value: 对应事件的订阅者队列final _emap = Map<Object, List<EventCallback>?>();//添加订阅者void on(eventName, EventCallback f) {_emap[eventName] ??=  <EventCallback>[];_emap[eventName]!.add(f);}//移除订阅者void off(eventName, [EventCallback? f]) {var list = _emap[eventName];if (eventName == null || list == null) return;if (f == null) {_emap[eventName] = null;} else {list.remove(f);}}//触发事件，事件触发后该事件所有订阅者会被调用void emit(eventName, [arg]) {var list = _emap[eventName];if (list == null) return;int len = list.length - 1;//反向遍历，防止订阅者在回调中移除自身带来的下标错位for (var i = len; i > -1; --i) {list[i](arg);}}
}//定义一个top-level（全局）变量，页面引入该文件后可以直接使用bus
var bus = EventBus();

使用：

//页面A中
...//监听登录事件
bus.on("login", (arg) {// do something
});//登录页B中
...
//登录成功后触发登录事件，页面A中订阅者会被调用
bus.emit("login", userInfo);

Dart中实现单例模式的标准做法就是使用static变量+工厂构造函数的方式，这样就可以保证EventBus()始终返回都是同一个实例

事件总线通常用于组件之间状态共享，但关于组件之间状态共享也有一些专门的包如redux、mobx以及前面介绍过的Provider。对于一些简单的应用，事件总线是足以满足业务需求的

6. 通知 Notification

通知（Notification）是Flutter中一个重要的机制，在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。Flutter中将这种由子向父的传递通知的机制称为通知冒泡

监听可滚动组件滚动通知的例子：

NotificationListener(onNotification: (notification){switch (notification.runtimeType){case ScrollStartNotification: print("开始滚动"); break;case ScrollUpdateNotification: print("正在滚动"); break;case ScrollEndNotification: print("滚动停止"); break;case OverscrollNotification: print("滚动到边界"); break;}},child: ListView.builder(itemCount: 100,itemBuilder: (context, index) {return ListTile(title: Text("$index"),);}),
);

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

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

相关文章

本地化部署自建类ChatGPT服务远程访问

本地化部署自建类ChatGPT服务远程访问

本地化部署自建类ChatGPT服务远程访问 文章目录 本地化部署自建类ChatGPT服务远程访问前言系统环境1. 安装Text generation web UI2.安装依赖3. 安装语言模型4. 启动5. 安装cpolar 内网穿透6. 创建公网地址7. 公网访问8. 固定公网地址 &#x1f340;小结&#x1f340; 前言 Te…
阅读更多...
基于gpt4all的企业内部知识问答服务应用搭建

基于gpt4all的企业内部知识问答服务应用搭建

文章目录 痛点项目缘起技术选型fine-tuningfew shot prompt engineering选定方案的特征描述 模型赛马gpt4all调优部署时踩坑python3.9 header缺失 -- 安装下缺失的就行运行时参数调优 代码分析项目代码库代码 效果展示例子1例子2 附录&#xff1a;所用的公司内部API文档例子&am…
阅读更多...
c#设计模式-行为型模式 之 观察者模式

c#设计模式-行为型模式 之 观察者模式

定义&#xff1a; 又被称为发布-订阅&#xff08;Publish/Subscribe&#xff09;模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者 对象同时监听某一个主题对象。这个主题对象在状态变化时&#xff0c;会通知所有的观察者对象&#xff0c;使他们能够自 …
阅读更多...
angular-mat-select 多选 实现按选择顺序排序

angular-mat-select 多选 实现按选择顺序排序

mat-select 正常情况下，多选后，已选项是按列表顺序进行排序，如果我想实现按照点击项目的顺序进行排序，我该如何做呢？ [参考网址](Angular order of selected option in multiple mat-select - Stack Overflow) sortComparator是Angular Material中mat-select组件的一个属…
阅读更多...
深度学习中的优化算法

深度学习中的优化算法

文章目录 前言一、优化和深度学习1.1 优化的目标1.2 深度学习中的优化挑战1.2.1 局部最小值1.2.2 鞍点1.2.3 梯度消失 二、梯度下降2.1 一维梯度下降2.1.1 学习率 2.2 多元梯度下降2.3 自适应方法2.3.1 牛顿法2.3.2 其他自适应方法 三、随机梯度下降3.1 随机梯度更新3.2 动态学…
阅读更多...
Flutter iOS 集成使用 flutter boost

Flutter iOS 集成使用 flutter boost

在 Flutter项目中集成完 flutter boost&#xff0c;并且已经使用了 flutter boost进行了路由管理&#xff0c;这时如果需要和iOS混合开发&#xff0c;这时就要到 原生端进行集成。 注意&#xff1a;之前建的项目必须是 Flutter module项目&#xff0c;并且原生项目和flutter m…
阅读更多...
Zebec Protocol 将进军尼泊尔市场，通过 Zebec Card 推动该地区金融平等

Zebec Protocol 将进军尼泊尔市场，通过 Zebec Card 推动该地区金融平等

流支付正在成为一种全新的支付形态&#xff0c;Zebec Protocol 作为流支付的主要推崇者&#xff0c;正在积极的推动该支付方案向更广泛的应用场景拓展。目前&#xff0c;Zebec Protocol 成功的将流支付应用在薪酬支付领域&#xff0c;并通过收购 WageLink 将其纳入旗下&#xf…
阅读更多...
grpcGateway配置

grpcGateway配置

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…
阅读更多...
基于 CentOS 7 构建 LVS-DR 群集以及配置nginx负载均衡

基于 CentOS 7 构建 LVS-DR 群集以及配置nginx负载均衡

目录 一、基于 CentOS 7 构建 LVS-DR 群集 1、前期准备 1、关闭防火墙 2、安装ifconfig 3、准备四台虚拟机 2、在DS上 2.1、配置LVS虚拟IP 2.2、手工执行配置添加LVS服务并增加两台RS 2.3、查看配置 3、在RS端&#xff08;第三台、第四台&#xff09; 上 3.1、配置W…
阅读更多...
校对软件助力司法公正：确保法律文书准确无误

校对软件助力司法公正：确保法律文书准确无误

校对软件在司法系统中的应用可以助力司法公正&#xff0c;确保法律文书的准确性和无误性。以下是校对软件如何发挥作用&#xff1a; 1.确保准确性&#xff1a;校对软件可以自动检查法律文书中的语法、拼写和标点等方面的错误。通过及时发现和修正这些错误&#xff0c;可以确保文…
阅读更多...
CycleGAN论文解读及代码实现

CycleGAN论文解读及代码实现

paper: https://arxiv.org/pdf/1703.10593.pdf github: https://github.com/aitorzip/PyTorch-CycleGAN 1 cycleGAN 小结 网络&#xff1a; 生成器2个&#xff1a;G_A&#xff0c;G_B 判别器两个&#xff1a; D_A&#xff0c;D_B损失函数8个 6个生成器损失函数 2个判别器损失…
阅读更多...
玩转graphQL

玩转graphQL

转载至酒仙桥的玩转graphQL - SecPulse.COM | 安全脉搏 前言 在测试中我发现了很多网站开始使用GraphQL技术&#xff0c;并且在测试中发现了其使用过程中存在的问题&#xff0c;那么&#xff0c;到底GraphQL是什么呢&#xff1f;了解了GraphQL后能帮助我们在渗透测试中发现哪些…
阅读更多...
【单片机】51单片机，TLC2543，驱动程序，读取adc

【单片机】51单片机，TLC2543，驱动程序，读取adc

TLC2543 是一款 12 位精密模数转换器 (ADC)。 1~9、11、12——AIN0&#xff5e;AIN10为模拟输入端&#xff1b; 15——CS 为片选端&#xff1b; 17——DIN 为串行数据输入端&#xff1b;&#xff08;控制字输入端&#xff0c;用于选择转换及输出数据格式&#xff09; 16——…
阅读更多...
Unity进阶--使用PhotonServer实现服务端和客户端通信--PhotonServer(一)

Unity进阶--使用PhotonServer实现服务端和客户端通信--PhotonServer(一)

文章目录 Unity进阶--使用PhotonServer实现服务端和客户端通信服务器的安装和配置添加日志客户端的配置客户端和服务器的通信Dlc 出现vscode引用不好使的时候 Unity进阶–使用PhotonServer实现服务端和客户端通信 服务器的安装和配置 Photon的地址&#xff1a;https://www.ph…
阅读更多...
第八篇: K8S Prometheus Operator实现Ceph集群企业微信机器人告警

第八篇: K8S Prometheus Operator实现Ceph集群企业微信机器人告警

Prometheus Operator实现Ceph集群企业微信告警 实现方案 我们的k8s集群与ceph集群是部署在不同的服务器上&#xff0c;因此实现方案如下&#xff1a; (1) ceph集群开启mgr内置的exporter服务&#xff0c;用于获取ceph集群的metrics (2) k8s集群通过 Service Endponit Ser…
阅读更多...
RESTful

RESTful

RESTful 简介 REST&#xff08;Representational State Transfer&#xff09;:表现层资源状态转移 ①资源 资源是一种看待服务器的方式&#xff0c;即&#xff0c;将服务器看作是由很多离散的资源组成。每个资源是服务器上可命名的抽象概念。因为资源是一种抽象概念&#xff0…
阅读更多...
vue3获得url上的参数值

vue3获得url上的参数值

1、引入 import { useRoute } from vue-router2、获得const route useRoute() console.log(route.query.number)
阅读更多...
el-table实现指定列合并

el-table实现指定列合并

table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组&#xff0c;第一个元素代表rowspan&#xff0c;第二个元素…
阅读更多...
HTML 初

HTML 初

前言 HTML的基本骨架 HTML基本骨架是构建网页的最基本的结果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
conda install 和pip install有什么区别？

conda install 和pip install有什么区别？

本篇为分享贴&#xff0c;截图部分选自知乎&#xff0c;部分选自csdn&#xff0c;文字内容是结合自己实践进行总结。 环境引用的包在哪&#xff1f; 首先&#xff0c;一条命令&#xff1a; python -m site 这条命令可以定位引用的包在哪里 &#xff0c;当然也可以自己设置默认…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发