HarmonyOS开发探索:父子组件手势绑定问题处理

场景一:父子组件同时绑定手势的冲突处理

效果图

cke_1742.gif

方案

在默认情况下,手势事件为非冒泡事件,当父子组件绑定相同的手势时,父子组件绑定的手势事件会发生竞争,最多只有一个组件的手势事件能够获得响应,默认子组件优先识别通过gesture绑定的手势。

  1. 当父组件使用priorityGesture绑定与子组件同类型的手势时,父组件优先识别通过priorityGesture绑定的手势,子组件的手势不会进行识别响应。

  2. 当父组件绑定了并行手势parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果(当前规格:当父组件和子组件同时绑定单击手势事件和双击手势事件时,父组件和子组件均只响应单击手势事件)。

核心代码

build() {Column() {Column() {Text('TapGesture:' + this.priorityTestValue).fontSize(28).gesture(TapGesture().onAction(() => {this.priorityTestValue += '\n子组件响应'}))}.height(300).width(250).padding(20).margin(20).border({ width: 3 })// 设置为priorityGesture时,点击文本会忽略Text组件的TapGesture手势事件,优先识别父组件Column的TapGesture手势事件.priorityGesture(TapGesture().onAction((event?: GestureEvent) => {this.priorityTestValue += '\n父组件响应'}), GestureMask.IgnoreInternal)Column() {Text('TapGesture:' + this.parallelTestValue).fontSize(28).gesture(TapGesture().onAction(() => {this.parallelTestValue += '\n子组件响应'}))}.height(300).width(250).padding(20).margin(20).border({ width: 3 })// 设置为parallelGesture时,点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件.parallelGesture(TapGesture().onAction((event?: GestureEvent) => {this.parallelTestValue += '\n父组件响应'}), GestureMask.Normal)}}
 

场景二:手势实现自定义组件滑动离手后的惯性滑动效果

效果图

cke_5623.gif

方案

通过GestureEvent中开放出来的的velocityX和velocityY分别对应当前手势的x轴方向速度和y轴方向速度,通过离手时的速度计算惯性滑动的距离,通过动画animateTo来模拟惯性滑动的效果。

核心代码


.gesture(PanGesture(this.panOption).onActionStart((event?: GestureEvent) => {console.info('Pan start')}).onActionUpdate((event?: GestureEvent) => {if (event) {this.vX = event.velocityXthis.vY = event.velocityYthis.offsetX = this.positionX + event.offsetXthis.offsetY = this.positionY + event.offsetY}}).onActionEnd(() => {animateTo({duration: 1000,curve: Curve.EaseOut,iterations: 1,playMode: PlayMode.Normal,onFinish: () => {console.info('play end')}}, () => {// 滑动距离:s = Vo*t+(Vt-Vo)/t*t^2/2 = Vo*t+(Vt-Vo)*t/2 = Vo*t+Vt*t/2-Vo*t/2 = (Vo+Vt)*t/2// Vo = Vx Vt = 0 当t=1时,this.offsetX = this.vX / 2this.offsetY = this.vY / 2})}))
 

场景三:手势实现类似地图中搜索地址滑动效果

方案

使用bindSheet属性为组件绑定半模态页面,结合绑定并行手势事件parallelGesture,在手指上滑和下滑时分别进行手势的操作,修改半模态页面的高度值。

核心代码

  1. 手指上滑时:优先识别list组件自身滚动效果,当list滚动到临界值时,触发list组件的onReachEnd回调,在回调中修改自定义变量值;在并行手势parallelGesture的panGesture手势的onActionUpdate回调中,进行逻辑判断以及对半模态页面的高度进行动态赋值为原先高度加上手势偏移量。

    
    .onReachEnd(() => {this.reachEnd=truethis.aaa=truethis.reachStart=falseconsole.log('onReachEnd', 'this.reachEnd:'+this.reachEnd,'this.reachStart:'+this.reachStart)})// list往上滑到头:识别手势,高度增加if(this.reachEnd){animateTo({duration: 2000,curve: Curve.EaseOut,iterations: 1,playMode: PlayMode.Normal,onFinish: () => {console.info('play end')}}, () => {this.sheetHeight=this.setSheetHeight-event.offsetY})if(event.offsetY>0){this.reachEnd=falseconsole.log('this.reachEnd', this.reachEnd)}console.log('offsetY 往上滑',event.offsetY,event.offsetY)}

  2. 手指下滑时:优先识别List组件自身滚动效果,当List滚动到临界值时,触发List组件的onReachStart回调,在回调中修改自定义变量值;在并行手势parallelGesture的panGesture手势的onActionUpdate回调中,进行逻辑判断以及对半模态页面的高度进行动态赋值为原先高度减去手势偏移量。

    
    .onReachStart(() => {this.reachStart=truethis.reachEnd=falseconsole.log('onReachStart','this.reachEnd:'+this.reachEnd,'this.reachStart:'+this.reachStart)})// list往下滑到底,识别手势,高度减小if(this.reachStart){animateTo({duration: 2000,curve: Curve.EaseOut,iterations: 1,playMode: PlayMode.Normal,onFinish: () => {console.info('play end')}}, () => {this.sheetHeight=this.setSheetHeight-event.offsetY})if(event.offsetY<0){this.reachStart=falseconsole.log('this.reachEnd', this.reachStart)}console.log('offsetY 往下滑',event.offsetY,this.reachStart)}


最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?但是又不知道从哪里下手,而且学习时频繁踩坑,最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙(HarmonyOS NEXT)学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料(安全链接,放心点击

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

一、鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)…等技术知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

四、大厂面试必问面试题

五、鸿蒙南向开发技术

六、鸿蒙APP开发必备

七、鸿蒙生态应用开发白皮书V2.0PDF


完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

                        

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

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

相关文章

有哪些方法可以恢复ios15不小心删除的照片?

ios15怎么恢复删除的照片&#xff1f;在手机相册里意外删除了重要的照片&#xff1f;别担心&#xff01;本文将为你介绍如何在iOS 15系统中恢复已删除的照片。无需专业知识&#xff0c;只需要按照以下步骤操作&#xff0c;你就能轻松找回宝贵的回忆。 一、从iCloud云端恢复删除…

Transformer动画讲解 - 工作原理

Transformer模型在多模态数据处理中扮演着重要角色,其能够高效、准确地处理包含不同类型(如图像、文本、音频、视频等)的多模态数据。 Transformer工作原理四部曲:Embedding(向量化)、Attention(注意力机制)、MLPs(多层感知机)和Unembedding(模型输出)。 阶段一:…

网上下载的PDF文件为何不能复制文字?该怎么办呢?

不知道大家有没有到过这种情况&#xff1f;在网上下载的PDF文件打开之后&#xff0c;发现选中文字之后无法复制。甚至其他功能也都无法使用&#xff0c;这是怎么回事&#xff1f;该怎么办&#xff1f; 首先&#xff0c;有可能PDF文件是扫描文件&#xff0c;是扫描文件的话&…

Gradle学习-4 创建二进制插件工程

二进制插件工程创建有两种方式&#xff1a; 创建独立的工程&#xff0c;调试的时候&#xff0c;需要手动发布成一个二进制插件jar包&#xff0c;给其他工程里面引用&#xff0c;进行功能测试。这种方式是比较麻烦的。创建buildSrc子工程&#xff0c;它是一个大工程中的子工程&…

云计算【第一阶段(19)】磁盘管理与文件系统 LVM与磁盘配额(二)

目录 一、LVM概述 1.1、LVM机制的基本概念 ​编辑 1.2、LVM的管理命令 1.3、lvm存储 两种机制 1.4、lvm应用实例 二、磁盘配额概述 2.1、设置磁盘配额 2.2.1、实现磁盘限额的条件 2.2.2、linux磁盘限额的特点 2.2.3、磁盘配额管理 一、LVM概述 1.1、LVM机制的基本概…

大模型ReAct:思考与工具协同完成复杂任务推理

ReAct: Synergizing Reasoning and Acting in Language Models Github&#xff1a;https://github.com/ysymyth/ReAct 一、动机 人类的认知通常具备一定的自我调节&#xff08;self-regulation&#xff09;和策略制定&#xff08;strategization&#xff09;的能力&#xff0…

Java案例抢红包

目录 一&#xff1a;题目要求&#xff1a; 二&#xff1a;思路分析&#xff1a;&#xff08;遇见问题先想出完整的思路逻辑再去动手事半功倍&#xff09; 三&#xff1a;具体代码&#xff1a; 一&#xff1a;题目要求&#xff1a; 二&#xff1a;思路分析&#xff1a;&#x…

武汉星起航:跨境电商流量红利爆发,2023年出海企业迎突破增长

在数字时代的浪潮中&#xff0c;中国跨境电商以惊人的爆发力崭露头角&#xff0c;成为全球贸易的璀璨新星。2023年数据显示&#xff0c;跨境电商出口额高达1.83万亿元&#xff0c;同比增长19.6%&#xff0c;这一显著增速不仅刷新纪录&#xff0c;更为众多出海企业带来了前所未有…

【RabbitMQ问题踩坑】RabbitMQ设置手动ack后,消息队列有多条消息,只能消费一条,就不继续消费了,这是为什么 ?

现象&#xff1a;我发送5条消息到MQ队列中&#xff0c;同时&#xff0c;我在yml中设置的是需要在代码中手动确认&#xff0c;但是我把代码中的手动ack给关闭了&#xff0c;会出现什么情况&#xff1f; yml中配置&#xff0c;配置需要在代码中手动去确认消费者消费消息成功&…

浅谈Mysql Innodb存储引擎

一、Mysql整体架构 二、MySQL 5.7 支持的存储引擎 类型 描述 MyISAM 拥有较高的插入、查询速度&#xff0c;但不支持事务 InnoDB 5.5版本后Mysql的默认数据库&#xff0c;5.6版本后支持全文索引&#xff0c;事务型数据库的首选引擎&#xff0c;支持ACID事务&#xff0c;支…

Android Lint

文章目录 Android Lint概述工作流程Lint 问题问题种类警告严重性检查规则 用命令运行 LintAndroidStudio 使用 Lint忽略 Lint 警告gradle 配置 Lint查找无用资源文件 Android Lint 概述 Lint 是 Android 提供的 代码扫描分析工具&#xff0c;它可以帮助我们发现代码结构/质量…

linux中 nginx+tomcat 部署方式 tomcat挂掉设置自动启动

在Linux环境下&#xff0c;要实现当Tomcat挂掉后自动重启&#xff0c;可以通过编写Shell脚本结合cron定时任务或者使用系统守护进程&#xff08;如Systemd、Upstart或SysVinit&#xff09;来完成。 使用Shell脚本和cron定时任务 编写检查并重启Tomcat的Shell脚本&#xff1a;首…

为什么网络爬虫广泛使用HTTP代理?

一、引言 网络爬虫作为自动抓取互联网信息的重要工具&#xff0c;在现代社会中发挥着不可或缺的作用。然而随着网络环境的日益复杂&#xff0c;网站反爬虫技术的不断进步&#xff0c;网络爬虫在获取数据的过程中面临着越来越多的挑战。为了应对这些挑战&#xff0c;HTTP 代理成…

Python容器 之 字符串--定义

目录 1.字符串如何定义&#xff1f; 2.定义字符串时遇到特殊内容怎么处理&#xff1f; 1)字符串本身包含引号&#xff0c;如&#xff1a;定义字符串 Im 小明、他叫“小明”。 &#xff08;1&#xff09;如果字符串本身包含单引号,定义的时候不能使用 单引号。 &#xff08…

【Linux】Linux下使用套接字进行网络编程

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ 用于网络应用开…

SAP 替代关系完全替代简介

最近用户在对长周期物料进行备料的时候又提出替代料的问题,主料库存不足的时候需要考虑替代料的在途库存,经常会忘了SAP标准的替代料逻辑,这次一次性把这个逻辑写清楚。 关于替代料的逻辑在前面的博文中测试多个替代料的使用场景 1、后继物料 2、组合替代 本文主要测试一下…

Sentinel如何使用BlockExceptionHandler实现限流/降级错误页面显示

1、修改配置项&#xff0c;打开对Spring MVC端点的保护 spring.cloud.sentinel.filter.enabledtrue 2、编写 BlockExceptionHandler的实现类 MyUrlBlockHandler.java package com.codex.terry.sentinel.urlblockhandler;/*** 文件名称: MyUrlBlockHandler.java* 编写人: yh…

解决ssh: connect to host IP port 22: Connection timed out报错(scp传文件指定端口)

错误消息 ssh: connect to host IP port 22: Connection timed out 指出 SSH 客户端尝试连接到指定的 IP 地址和端口号&#xff08;默认 SSH 端口是 22&#xff09;&#xff0c;但是连接超时了。这意味着客户端没有在预定时间内收到来自服务器的响应。 可能的原因 SSH 服务未…

昇思25天学习打卡营第6天|linchenfengxue

​​​​​​SSD目标检测 SSD&#xff0c;全称Single Shot MultiBox Detector&#xff0c;是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上&#xff0c;SSD对于输入尺寸300x300的网络&#xff0c;达到74.3%mAP(mean Average Precision)以…

MATLAB-振动问题:单自由度阻尼振动系统受迫振动

一、基本理论 二、MATLAB实现 单自由度阻尼振动系统受迫振动&#xff0c;MATLAB代码如下&#xff1a; clear; clc; close allA 1; psi 0; F0 10; D 20; Rm 0.5; M 1; omega 2; delta Rm / (2*M); omega0 sqrt(D / M); Omega sqrt(omega0^2 - delta^2); Zm Rm i *…