flutter知识点---手势识别原理

Flutter 的手势识别原理涉及事件分发、手势检测、手势识别器(GestureRecognizer)以及手势识别组件(如 GestureDetector)的协同工作。以下是对这一原理的说明:

事件分发

  1. 事件捕获

    • 用户与屏幕交互产生的触摸事件(如手指触摸、移动、抬起等)首先被操作系统捕获。
  2. 事件传递给Flutter

    • Flutter Engine 通过平台通道从操作系统接收这些原始触摸事件。
  3. 事件转换

    • Flutter Engine 将接收到的原始事件转换为 PointerEvent 对象,并将其添加到待处理的事件队列中。
  4. 事件分发

    • Flutter Framework 通过其内部的事件循环逐个处理队列中的 PointerEvent
    • 在处理过程中,首先调用 Window.onPointerDataPacket 回调,触发事件分发流程。
    • 分发过程中,会调用 _handlePointerEvent 方法,该方法会执行命中测试(Hit Test),生成 HitTestResult,其中包含了所有命中测试结果(即用户触点下的可交互Widget列表)。
  5. 命中测试与事件路由

    • 命中测试基于Widget树的结构,从根节点开始向下遍历,判断触点是否落在某个Widget的区域内。
    • 遍历过程中,每个Widget可以返回一个HitTestEntry,表示触点与其关联的RenderObject之间的关系。
    • 最终,HitTestResult中存储了一个命中测试对象(如RenderObject)的集合 _path,按照从叶子节点到根节点的顺序排列,反映了事件从最深层Widget向上冒泡的路径。

手势检测与识别

  1. 手势识别器(GestureRecognizer)

    • GestureRecognizer 是一个抽象类,代表了对特定类型手势(如点击、滑动、缩放等)识别能力的封装。
    • Flutter 内置了一系列预定义的手势识别器子类,如 TapGestureRecognizerPanGestureRecognizerScaleGestureRecognizer 等,开发者可以直接使用或继承自定义。
  2. 手势识别组件(如 GestureDetector

    • GestureDetector 是一个功能性组件,它包装了其他Widget,并通过内部关联的手势识别器来识别用户在被包装Widget上的手势。
    • 开发者可以通过添加不同类型的 GestureRecognizerGestureDetector 中,使其能够响应特定的手势。
  3. 手势检测与冲突解决

    • 当一个 PointerEvent 被分发到 GestureDetector 时,它会将事件传递给关联的所有手势识别器。
    • 手势识别器根据接收到的事件序列判断是否满足其识别的手势条件。
    • 如果多个手势识别器同时识别到可能的手势,Flutter 会通过一套复杂的冲突解决机制(如基于优先级、互斥性等规则)决定哪些手势应该被最终确认和触发。
  4. 手势回调与响应

    • 当手势识别器确认某个手势发生时,它会触发相应的回调函数,这些回调函数通常是在创建手势识别器时通过设置其属性(如onTaponPanUpdate等)提供的。
    • 开发者可以在回调函数中编写响应手势行为的业务逻辑,如更新应用状态、执行动画、发送网络请求等。

手势识别过程总结

Flutter 的手势识别原理可以概括为以下几个步骤:

  • 事件捕获与传递:操作系统捕获触摸事件,传递给Flutter Engine,Engine将其转换为 PointerEvent 并放入事件队列。
  • 事件分发与命中测试:Flutter Framework 处理事件队列,执行命中测试确定触点下Widget路径。
  • 手势检测GestureDetector 接收事件,将其传递给关联的 GestureRecognizer 进行识别。
  • 冲突解决与回调触发:识别器判断手势条件,系统解决可能的手势冲突,触发相应的回调函数。

通过这套机制,Flutter 能够准确、高效地识别用户在屏幕上执行的各种手势,并将这些手势转化为应用内部的行为响应,从而实现丰富的交互体验。

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

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

相关文章

ARM学习

uart.c #include "uart4.h" void uart4_config() {//使能GPIOB\GPIOG\UART4的外设时钟RCC->MP_AHB4ENSETR | (0x1<<1);RCC->MP_AHB4ENSETR | (0x1<<6);RCC->MP_APB1ENSETR | (0x1<<16);//设置PG11和PB2为管脚复用功能//PB2GPIOB->MOD…

服务器负载均衡SLB/加密原理

多台服务器提供相同的服务 SLB(server load balancing) 多台服务器对应一个虚拟地址&#xff0c;该地址是防火墙虚拟出来的。 服务器负载均衡功能仅支持IPV4协议 多通道协议仅支持FTP协议

【架构-13】云原生架构

云原生架构产生背景&#xff1f; &#xff08;1&#xff09;大量资源被占用且难以分享&#xff0c;上云后&#xff0c;云厂商提供统一的IaaS能力和云服务。 &#xff08;2&#xff09;提供极致性能的云原生算力。 &#xff08;3&#xff09;集成服务&#xff0c;构建管理数据、…

Android Studio通过修改文件gradle-wrapper.properties内容下载gradle

一、问题描述 在Android Studio中新建项目后会下载你所新建的项目的activity/gradle/wrapper目录下所配置的gradle-7.3.3-bin.zip包&#xff08;笔者的是该版本包&#xff09;&#xff0c;而大多数时候会下载失败&#xff0c;如下 二、解决办法 新建工程后&#xff0c;取消下…

AI术语大全:AGI、LLM、GenAI、GPT、ChatGPT和AIGC是什么意思?

讲动人的故事,写懂人的代码 自2022年底ChatGPT在全球AI界闪亮登场以后,你是不是经常听到AGI、LLM、GenAI、GPT和AIGC这几个词,但总是分不清它们到底是什么意思? 今天,我就用简单的话来给你讲讲这些词到底是什么意思。 AI,人工智能(Artificial Intelligence),就是让机…

一比一实现ChatGPT流式接口前端显示效果(打字机效果)【对比几种不同的流式实现方案】

前端实现GPT或者其他大模型的流式推送的数据接收可以通过EventSource、Axios、或者基于EventSource实现的microsoft/fetch-event-source插件库&#xff1b; GPT官方是基于原生EventSource实现的流式数据接收&#xff0c;我们作为个人开发使用可以使用Axios或者使用microsoft/fe…

JavaWeb开发03-Mybatis入门-基础操作-XML映射文件-动态SQL

一、Mybatis-入门 Java程序控制数据库 1.入门 定义实体类&#xff1a;一定要和表中的字段一一对应 配置连接数据库数据 建立Mapper层语句&#xff0c;来获取数据库数据以及将其封装到user的list中去。 2.配置SQL提示 为了进行查询数据库中有哪些表&#xff0c;所以得连接数据…

【AngularJs】前端使用iframe预览pdf文件报错

<iframe style"width: 100%; height: 100%;" src"{{vm.previewUrl}}"></iframe> 出现报错信息&#xff1a;Cant interpolate: {{vm.previewUrl}} 在ctrl文件中信任该文件就可以了 vm.trustUrl $sce.trustAsResourceUrl(vm.previewUrl);//信任…

FPGA - 仲裁器的设计实现

一&#xff0c;为什么做仲裁 在多主单从的设计中&#xff0c;当多个源端同时发起传输请求时&#xff0c;这个时候就需要仲裁器来根据优先级来判断响应哪一个源端&#xff0c;向其传输数据。比如&#xff1a;以太网仲裁&#xff0c;DDR仲裁&#xff0c;光纤传图仲裁..... 二&a…

android wifi直连 wifip2pmanager

android wifi直连 wifip2pmanager&#xff1b;使用WiFi 直连&#xff0c;然后通过udp进行通讯。 Android WiFi 直连&#xff08;Wi-Fi Direct&#xff0c;也称为Wi-Fi P2P&#xff09;是一种让两台或多台设备通过Wi-Fi技术直接进行点对点连接的技术&#xff0c;无需借助传统的无…

iOS知识点 ---- 离屏渲染

iOS 中的离屏渲染&#xff08;Off-Screen Rendering&#xff09;是指在绘制某些复杂图形或特殊效果时&#xff0c;系统无法直接在当前屏幕缓冲区进行绘制&#xff0c;而是需要先在额外的离屏缓冲区&#xff08;Off-Screen Buffer&#xff09;中完成渲染工作&#xff0c;然后再将…

electron打包编译国产统信uos系统 arm架构 x86架构 linux mac等环境

electron v21版本以上统信UOS会提示gbm_bo_map错误&#xff0c;可使用v8~v21版本的electron 打包linux包需要再linux系统下运行编译&#xff0c;arch可以指定架构 如果要在统信uos上运行&#xff0c;需要打包成deb格式&#xff0c;在target中修改成deb 或者用第三方软件把app…

three.js捋文档的记录笔记(六):场景 几何体 材质 物体 相机 渲染器的简单理解

三维场景Scene const scene new THREE.Scene();物体形状&#xff1a;几何体 Geometry //创建一个长方体几何对象Geometry const geometry new THREE.BoxGeometry(100, 100, 100); 物体外观&#xff1a;材质Material //创建一个材质对象Material const material new THREE.M…

在Vue3中如何使用H.265视频流媒体播放器EasyPlayer.js?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

【AIGC调研系列】Grok-1.5v与Gpt-4v的效果对比

Grok-1.5V与GPT-4V的效果对比中&#xff0c;Grok-1.5V在多个领域和基准测试中表现优于GPT-4V。具体来说&#xff0c;Grok-1.5V在多学科推理、文档理解、科学图表处理等方面表现出色[1]。它还特别强调了其在理解物理世界的能力上的优势[4][8][12]&#xff0c;并且在RealWorldQA基…

农作物数据分析

,表中文名,表英文名,字段中文名,字段英文名,字段类型,字段描述,字段权限,字段权限描述,字段权限类型 0,cropinfo,作物信息表,作物ID,cropid,UUIDField, 1,cropinfo,作物信息表,作物名称,cropname,CharField, 2,cropinfo,作物信息表,品种,variety,CharField, 3,cropinfo,作物信息…

C语言面试题之奇偶链表

奇偶链表 实例要求 1、给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表&#xff1b;2、第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推&#x…

单链表接口函数的实现(增删查改)

一、单链表的实现形式以及接口函数的声明 #include<stdio.h> #include<stdlib.h> #include<assert.h> typedef int DataType ;typedef struct SListNode {DataType data;struct SListNode* next; }SLTNODE; void SLTPrint(SLTNODE* phead);//打印链表 SLTNO…

Wpf 使用 Prism 实战开发Day20

备忘录功能页面完善以及优化 备忘录功能基本跟前一章节的待办事项差不多一至&#xff0c;就不再做过多的笔述了 一.备忘录功能完整页面源码 MemoView.xaml <UserControl x:Class"MyToDo.Views.MemoView"xmlns"http://schemas.microsoft.com/winfx/2006/xam…

33、链表-排序链表

思路&#xff1a; 首先排序可以使用集合将所有节点放入集合中&#xff0c;然后再根据每个节点值进行排序。这个可以很容易做到&#xff0c;不再赘述 其次就是直接在链表上排序&#xff0c;如何排序可以使用归并排序的方式&#xff0c;代码如下&#xff1a; class Solution {…