鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:PanGesture)

news/2024/4/16 16:02:23/文章来源:https://blog.csdn.net/m0_64420071/article/details/136506877

拖动手势事件,当滑动的最小距离超过设定的最小值时触发拖动手势事件。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

接口

PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | PanGestureOptions)

参数:

参数名称参数类型必填参数描述
fingersnumber用于指定触发拖动的最少手指数,最小为1指, 最大取值为10指。
默认值:1
取值范围:[1,10]
说明:
当设置的值小于1或不设置时,会被转化为默认值。
directionPanDirection用于指定触发拖动的手势方向,此枚举值支持逻辑与(&)和逻辑或(|)运算。
默认值:PanDirection.All
distancenumber用于指定触发拖动手势事件的最小拖动距离,单位为vp。
默认值:5
说明:
Tabs组件滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。
当设定的值小于等于0时,按默认值5处理。

PanDirection枚举说明

名称描述
All所有方向。
Horizontal水平方向。
Vertical竖直方向。
Left向左拖动。
Right向右拖动。
Up向上拖动。
Down向下拖动。
None任何方向都不可触发拖动手势事件。

PanGestureOptions

通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性,从而避免通过状态变量修改属性(状态变量修改会导致UI刷新)。

PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance?: number })

参数:

参数名称参数类型必填参数描述
fingersnumber用于指定触发滑动的最少手指数,最小为1指, 最大取值为10指。
默认值:1
directionPanDirection用于指定设置滑动方向,此枚举值支持逻辑与(&)和逻辑或(|)运算。
默认值:PanDirection.All
distancenumber用于指定触发拖动手势事件的最小拖动距离,单位为vp。
默认值:5
说明:
Tabs组件滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。
当设定的值小于等于0时,按默认值(5)处理。

接口

名称功能描述
setDirection(value: PanDirection)设置direction属性。
setDistance(value: number)设置distance属性。
setFingers(value: number)设置fingers属性。

事件

名称功能描述
onActionStart(event: (event?: GestureEvent) => void)Pan手势识别成功回调。
onActionUpdate(event: (event?: GestureEvent) => void)Pan手势移动过程中回调。
fingerList为多根手指时,该回调监听每次只会更新一根手指的位置信息。
onActionEnd(event: (event?: GestureEvent) => void)Pan手势识别成功,手指抬起后触发回调。
onActionCancel(event: () => void)Pan手势识别成功,接收到触摸取消事件触发回调。
说明:
在窗口失焦的时候会触发。

属性

名称类型描述
tag11+string设置Pan手势标志,用于自定义手势判定时区分绑定的手势。

示例

// xxx.ets
@Entry
@Component
struct PanGestureExample {@State offsetX: number = 0@State offsetY: number = 0@State positionX: number = 0@State positionY: number = 0private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })build() {Column() {Column() {Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)}.height(200).width(300).padding(20).border({ width: 3 }).margin(50).translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动// 左右拖动触发该手势事件.gesture(PanGesture(this.panOption).onActionStart((event?: GestureEvent) => {console.info('Pan start')}).onActionUpdate((event?: GestureEvent) => {if (event) {this.offsetX = this.positionX + event.offsetXthis.offsetY = this.positionY + event.offsetY}}).onActionEnd(() => {this.positionX = this.offsetXthis.positionY = this.offsetYconsole.info('Pan end')}))Button('修改PanGesture触发条件').onClick(() => {// 将PanGesture手势事件触发条件改为双指以任意方向拖动this.panOption.setDirection(PanDirection.All)this.panOption.setFingers(2)})}}
}

示意图:

向左拖动:

zh-cn_image_0000001174264374

点击按钮修改PanGesture触发条件,双指向左下方拖动:

zh-cn_image1_0000001174264374

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

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

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

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

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

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

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

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

图片

 《鸿蒙开发基础》

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

图片

 《鸿蒙开发进阶》

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

图片

《鸿蒙进阶实战》

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

图片

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

总结

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

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

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

相关文章

js--DOM树简介

DOM树将HTML文档以树状结构直管段表现出来,也称为节点树。 1、节点Node 节点是DOM树中的单个点,包括文档本身、元素、文本以及注释都属于是节点。 元素节点:所有的标签,html是根节点 属性节点:所有的属性 文本节点&…

基于springboot+vue的医疗挂号管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

1 数据分析概述与职业操守 (3%)

1、 EDIT数字化模型 E——exploration探索 (是什么) 业务运行探索:探索关注企业各项业务的运行状态、各项指标是否合规以及各项业务的具体数据情况等。 D——diagnosis 诊断 (为什么) 问题根源诊断:当业务指标偏离正常值时&…

Git保姆级使用教程

一、版本控制 1.1 团队开发问题 企业项目一般以团队形式实施开发,那团队开发中会出现哪些问题呢? 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之…

学习统一的Hyper - network用于多模态MR图像合成和缺失模态的肿瘤分割

Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities背景贡献实验方法多模态合成方法超…

Go的安装

一. 下载地址 Go官方下载地址:https://golang.org/dl/ Go中文网:https://go.p2hp.com/go.dev/dl/ 根据不同系统下载不同的包。 二. 配置GOPATH GOPATH是一个环境变量,用来表明你写的go项目的存放路径。 GOPATH路径最好只设置一个&#xff0…

Linux系统:内核参数调优

目录 1、/proc目录 2、sysctl命令 3.1 控制源路由验证 3.2 控制内核的系统请求调试功能 3.3 控制核心转储是否将PID附加到核心文件名 3.4 控制TCP同步cookie的使用 3.5 在网桥上禁用netfilter 3.6 控制消息队列的默认最大大小 3.7 调试TCP内核参数 3.8 调试套…

Docker之若依项目部署

目录 一、搭建项目的局域网 1.1搭建局域网 1.2查看局域网 1.3注意:要关闭防火墙,关闭后要重启docker 二、redis安装 2.1创建目录 2.2修改redis.conf文件 三、MySQL安装 3.1安装 3.2设置远程连接 3.3创建数据库 四、若依后端项目搭建 4.1创建…

学习经验分享【NO.21】近期中文核心期刊目标检测论文理解

前言:最近比较忙,很久没有翻看知网论文了,看了下yolo改进相关的论文发现基于YOLOv5改进的核心期刊论文还是层出不穷,并没有因为已经是2024年了YOLOv9的出现而导致论文不好发,同时YOLOv8的论文也出了不少,所…

11 OpenCV 上采样与降采样,高斯不同(DOG)

文章目录 算子什么是高斯不同示例 算子 pyrUp(Mat src, Mat dst, Size(src.cols*2, src.rows*2)) 生成的图像是原图在宽与高各放大两倍 pyrDown(Mat src, Mat dst, Size(src.cols/2, src.rows/2)) 生成的图像是原图在宽与高各缩小1/2什么是高斯不同 定义:就是把同…

安卓使用ExoPlayer出现膨胀类异常

1.导包 implementation com.google.android.exoplayer:exoplayer-core:2.15.1implementation com.google.android.exoplayer:exoplayer-ui:2.15.1 2.在Androidifest.xml加入权限&#xff0c;我这里加了网络与读写权限 <uses-permission android:name"android.permissio…

【C语言】终の指针(前篇)

个人主页点这里~ 指针初阶点这里~ 指针初阶2.0点这里~ 指针进阶点这里~ 终の指针 一、回调函数二、qsort函数1、整形比较2、结构数据比较①结构体②-> 的使用③结构数据比较 一、回调函数 回调函数就是⼀个通过函数指针调用的函数。 把一个函数的指针作为参数传递给另一…

仓储管理系统(WMS) 的研发历程-PRD撰写

题外话&#xff1a;PRD的展现形式有多种&#xff0c;有的人喜欢在axure上直接做产品描述&#xff0c;觉得word较为过时&#xff0c;有的人认为axure不专业&#xff0c;任何展现形式都无可厚非&#xff0c;重要的达到PRD的目的&#xff0c;PRD的目标是让团队知道需求实现细节&am…

vue基础教程(4)——深入理解vue项目各目录

博主个人微信小程序已经上线&#xff1a;【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介 本系列文章由浅入深&#xff0c;从基础知识到实战…

Ajax、Axios、Vue、Element与其案例

目录 一.Ajax 二.Axios 三.Vue 四.Element 五.增删改查案例 一.依赖&#xff1a;数据库&#xff0c;mybatis&#xff0c;servlet&#xff0c;json-对象转换器 二.资源&#xff1a;elementvueaxios 三.pojo 四.mapper.xml与mapper接口 五.service 六.servlet 七.html页…

vue3的基本使用(1)

Vue3的基本使用&#xff08;1&#xff09; 初识vue31. vue3简介2. 性能提升3. 源码升级 Vue3的创建1. vue-cli创建2. vite创建 Composition API的区别&#xff08;组合式&#xff09;setup函数响应式数据1. ref响应式2. reactive响应式 toRefs与toRef简单介绍 初识vue3 1. vue…

Easticsearch性能优化之索引优化

Easticsearch性能优化之索引优化 一、合理的索引设计二、合理的分片和副本三、合理的索引设置 对于性能优化&#xff0c;Elasticsearch&#xff08;以下简称ES&#xff09;的索引优化是提高性能的关键因素之一。合理的设计索引&#xff0c;合理的分片和副本以及合理的缓存设置等…

Matlab 机器人工具箱 例程:运动学+动力学+路径规划+可视化

文章目录 1 创建机器人2 机器人显示3 机器人示教4 机器人路径规划&#xff1a;给定关节角路径5 机器人路径规划&#xff1a;给定末端位姿&#xff0c;求关节角路径6 工作空间可视化参考链接 1 创建机器人 clc;clear;close all; deg pi/180;L1 Revolute(d, 0, a, 0, alpha, 0,…

sudo command not found

文章目录 一句话Intro其他操作 一句话 sudo 某命令 改成 sudo -i 某命令 试试。 -i 会把当前用户的环境变量带过去&#xff0c;这样在sudo的时候&#xff0c;有更高的权限&#xff0c;有本用户的环境变量(下的程序命令)。 -i, --login run login shell as the target user; a …

蓝桥杯嵌入式模板构建——RCT时钟

在CubeMX里的RTC模块启用RTC时钟和日历功能 输入到RTC的时钟要配置成1HZ,这样的话RTC每经过1s走时一次 由于RTC时钟默认配置为32Khz 所以我们需要将异步分频值与同步分频值的乘积调整为32K分频即可一秒走时一次 频率&#xff1a;32000hz / 32000hz 1hz 必须是31和999&#…