鸿蒙交互事件开发04——手势事件

news/2024/9/18 13:53:51/ 标签: 交互

1    概    述   

手势事件是移动应用开发中最常见的事件之一,鸿蒙提供了一些方法来绑定手势事件。通过给各个组件绑定不同的手势事件,并设计事件的响应方式,当手势识别成功时,ArkUI框架将通过事件回调通知组件手势识别的结果。

绑定手势事件的方法有三种:a)普通绑定;b)带优先级的绑定;c)并行手势绑定。下面分别讨论。

2   普 通 绑 定 

普通的绑定方式接口定义如下:

.gesture(gesture: GestureType, mask?: GestureMask)

其中,GestureType是手势种类实例,默认有如下取值:

👉🏻 TapGesture:点击手势,支持单次点击、多次点击的识别。

👉🏻 LongPressGesture: 长按手势。

👉🏻 PanGesture: 平移手势(滑动距离小于5vp时触发)

👉🏻 PinchGesture: 捏合手势

👉🏻 RotationGesture: 旋转手势

👉🏻 SwipGesture: 滑动手势(滑动最小速度为100vp/s时触发)

👉🏻 GestureGroup: 将手势识别组合成一组,支持连续识别,并行识别和互斥识别

第二参数GestureMask是一个枚举,分别有如下取值

👉🏻 Normal: 不屏蔽子组件的手势,按照默认手势识别顺序进行识别

👉🏻 IgnoreInternal: 屏蔽子组件的手势,包括子组件上系统内置的手势,如子组件为List组件时,内置的滑动手势同样会被屏蔽。

举例:我们可以将点击手势TapGesture通过gesture手势绑定方法绑定到Text组件上。

// xxx.ets@Entry@Componentstruct Index {  build() {    Column() {      Text('Gesture').fontSize(28)        // 采用gesture手势绑定方法绑定TapGesture        .gesture(          TapGesture()            .onAction(() => {              console.info('TapGesture is onAction');            }))    }    .height(200)    .width(250)  }}

3  带优先级的绑定

带优先级的手势绑定接口定义如下:

.priorityGesture(gesture: GestureType, mask?: GestureMask)。

接口中:GestureType和GestureMask的参数与普通绑定的参数相同,这里不再展开介绍。

在默认情况下,当父组件和子组件使用普通gesture绑定同类型的手势时,子组件优先识别通过gesture绑定的手势。当父组件使用priorityGesture绑定与子组件同类型的手势时,父组件优先识别通过priorityGesture绑定的手势。

举例:当父组件Column和子组件Text同时绑定TapGesture手势时,父组件以带优先级手势priorityGesture的形式进行绑定时,优先响应父组件绑定的TapGesture

// xxx.ets@Entry@Componentstruct Index {  build() {    Column() {      Text('Gesture').fontSize(28)        .gesture(          TapGesture()            .onAction(() => {              console.info('Text TapGesture is onAction');            }))    }    .height(200)    .width(250)    // 设置为priorityGesture时,点击文本区域会忽略Text组件的TapGesture手势事件,优先响应父组件Column的TapGesture手势事件    .priorityGesture(      TapGesture()        .onAction(() => {          console.info('Column TapGesture is onAction');        }), GestureMask.IgnoreInternal)  }}

4 并行手势绑定

接口定义如下:

.parallelGesture(gesture: GestureType, mask?: GestureMask)

接口中:GestureType和GestureMask的参数与普通绑定的参数相同,这里不再展开介绍。

在默认情况下,手势事件为非冒泡事件,当父子组件绑定相同的手势时,父子组件绑定的手势事件会发生竞争,最多只有一个组件的手势事件能够获得响应。而当父组件绑定了并行手势parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果。

Demo:​​​​​​​

// xxx.ets@Entry@Componentstruct Index {  build() {    Column() {      Text('Gesture').fontSize(28)        .gesture(          TapGesture()            .onAction(() => {              console.info('Text TapGesture is onAction');            }))    }    .height(200)    .width(250)    // 设置为parallelGesture时,点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件    .parallelGesture(      TapGesture()        .onAction(() => {          console.info('Column TapGesture is onAction');        }))  }}

图片

上面例子中,如果我们想让父组件Column独自消费TapGesture,则可以在绑定时添加第二个参数 GestureMask.IgnoreInternal 。代码如下:​​​​​​​

// xxx.ets@Entry@Componentstruct Index {  build() {    Column() {      Text('Gesture').fontSize(28)        .gesture(          TapGesture()            .onAction(() => {              console.info('Text TapGesture is onAction');            }))    }    .height(200)    .width(250)    // 设置为parallelGesture时,点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件    .parallelGesture(      TapGesture()        .onAction(() => {          console.info('Column TapGesture is onAction');        }), GestureMask.IgnoreInternal)  }}

图片

此时,控制台只有Column容器的日志打印。

由于篇幅原因,后续我们继续讨论手势事件的其他场景。


http://www.ppmy.cn/news/1526201.html

相关文章

AI创意引擎:优化Prompt提示词的高效提问技巧

AI内容创作的精髓:提示词(Prompt) 在AI领域中,提示词(Prompt)是与模型沟通的关键工具。提示词不仅决定了AI生成内容的方向和质量,还在优化模型输出、提升用户体验中扮演着至关重要的角色。因此…

【机器学习】迁移学习的实践

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 迁移学习的实践迁移学习的常见框架1. 特征提取器微调(Fine-tuning the Feature …

获取某宝拍立淘API接口:深度学习图像实现匹配和检索

1. 总体概述 拍立淘的核心技术在于图像识别与检索,融合了深度学习、计算机视觉、大数据处理等多个领域的先进技术1。通过构建大规模的商品图像数据库,并利用深度学习算法提取图像特征,实现高效的图像匹配与检索1。 2. 具体技术环节 &#…

Unity 第一人称游戏的武器被其他物体覆盖解决方案

在第一人称游戏的时候,会出现渲染过程中,主角的手持武器可能会被其他物体挡住。 解决方法 在主摄像机下再创建一个摄像机,负责渲染不同图层 Main Camera的参数:我们这个摄像机不渲染equipable层(自定义武器为equipab…

从ANN到SNN的转换:实现、原理及两种归一化方法【MINIST、实战】

从ANN到SNN的转换:实现、原理及两种归一化方法 引言 随着神经形态计算的迅猛发展,脉冲神经网络(Spiking Neural Networks, SNNs)作为一种仿生神经计算模型,逐渐展现出其在低功耗和事件驱动计算领域的巨大潜力。不同于…

【docker】docker 关键技术 —— 镜像制作

docker 镜像制作 镜像制作及原因Docker 镜像制作方式快照方式制作镜像制作命令 Dockerfile 制作镜像Dockerfile 是什么Dockerfile 格式为什么需要 Dockerfilegitee 详细使用 Dockerfile 教程 镜像制作及原因 镜像制作是因为某种需求,官方的镜像无法满足需求&#x…

【网盘外快】百度网盘SVIP充值使用说明,如何通过软件自动充值获取新用户优惠?这篇文章给你正确答案。

资源地址: 此软件需要 网盘ck 才可以使用。 雷电模拟器下载地址:https://www.ldmnq.com/ 软件下载地址:https://wwi.lanzoup.com/b01qdiavzg 密码:666 模拟器使用说明: 1、调整模拟器分辨率调整为:540 X 960。 2、…

【数据结构与算法 | 每日一题 | 力扣篇】力扣1184

1. 力扣1184:公交站间的距离 1.1 题目: 环形公交路线上有 n 个站,按次序从 0 到 n - 1 进行编号。我们已知每一对相邻公交站之间的距离,distance[i] 表示编号为 i 的车站和编号为 (i 1) % n 的车站之间的距离。 环线上的公交车…

后端入门 (JQuery基础) 01

引入jQuery资源&#xff08;https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js&#xff09; <script src"jquery.js"></script> <!-- 引入jQuery资源 --> 绑定事件的方式&#xff1a; 1. 直接使用事件函数 $("p").click(func…

【智路】智路OS Airos Edge 2.0 Quick Start

Airos Edge 2.0 Quick Start 1 智路OS2.0 1.1 简介 智路OS路侧操作系统airos-edge自下而上分别由内核层&#xff0c;硬件抽象层、框架层、服务层和应用层构成&#xff1b;提供了一系列抽象和框架&#xff0c;支持设备接入、服务、应用等组件开发&#xff0c;兼容X86和ARM操作…

TCP和MQTT通信协议

协议分层 网络分层 协议应用层 Co AP MQTT HTTP传输层 UDP TCP网络层 IP链路层 Enternet 网络分层中最…

在Ubuntu上部署 Misskey 服务器

今天我在阿贝云的免费服务器上进行了一次有趣的部署测试。阿贝云的服务真是让人惊喜&#xff0c;尤其是它的免费云服务器&#xff0c;提供的1核CPU、1G内存、10G硬盘和5M带宽的配置&#xff0c;绝对是个不错的免费服务器&#xff01;这样的环境适合开发和学习&#xff0c;给我带…

十四,在Spring Boot当中对应“ Tomcat 服务器的相关配置”和“服务器的切换”的详细说明

十四&#xff0c;在Spring Boot当中对应“ Tomcat 服务器的相关配置”和“服务器的切换”的详细说明 文章目录 十四&#xff0c;在Spring Boot当中对应“ Tomcat 服务器的相关配置”和“服务器的切换”的详细说明1. 基本介绍2. 准备工作&#xff1a;3. 内置 Tomcat 的配置3.1 第…

uniapp升级Vue3:避坑指南与步骤详解

为什么要升级到 Vue3 Vue3 是 Vue.js 的最新版本&#xff0c;相比 Vue2&#xff0c;它带来了许多改进和新特性&#xff0c;比如更小的包体积、更好的性能、更强大的组合式 API 等。通过升级到 Vue3&#xff0c;我们可以享受到这些新特性带来的好处&#xff0c;提升项目的开发效…

在服务器上开Juypter Lab教程(远程访问)

在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09; 文章目录 在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09;一、安装anaconda1、安装anaconda2、提权限3、运行4、同意协议5、安装6、是否要自动初始化 conda7、结束8、检查 二、Anaconda安装Pytorch…

精品PPT | 离散制造行业智能工厂总体解决方案

一、建设背景 离散制造业&#xff0c;包括机械制造业、汽车制造业和家电制造业等&#xff0c;其生产过程涉及多个不连续的工序&#xff0c;产品通常由多个零件装配而成。这类行业面临的挑战包括品种多、批量小、订单变化快、临时插单频繁以及外协件管理困难等问题&#xff0c;…

Unity-Transform类-父子关系

Transform拓展方法练习 public static class Tuozhan { 拓展方法&#xff0c;把子对象按名字长度排序 public static void Sortchild(this Transform obj) { List<Transform> Indexs new List<Transform>(); for (int i 0; i < obj.chil…

9. 什么是 Beam Search?深入理解模型生成策略

是不是总感觉很熟悉&#xff1f; 在之前第5&#xff0c;7&#xff0c;8篇文章中&#xff0c;我们都曾经用到过与它相关的参数&#xff0c;而对于早就有着实操经验的同学们&#xff0c;想必见到的更多。这篇文章将从示例到数学原理和代码带你进行理解。 Beam Search 对应的中文翻…

《上海体育大学学报》

投稿要求 &#xff08;1&#xff09;稿件格式&#xff1a;请参考《上海体育大学学报》论文模板&#xff0c;可前往官网“论文模板”下载。 &#xff08;2&#xff09;开设栏目&#xff1a;《专题探索》《学术争鸣》《原创成果》《研究综述》《热点透视》《新视点》等。 &…

Google 工程师开始用Rust 语言开发 Android 固件

Google 工程师最近开始尝试用 Rust 语言为 Android 虚拟化框架&#xff0c;他们用Rust语言重写了保护虚拟机的固件。Google工程师 Ivan Lozano 和 Dominik Maier 在官方博客上鼓励其他开发者也用 Rust 开发固件&#xff0c;表示并不难。 众所周知&#xff0c;系统固件通常是用…