HarmonyOS(45) 控件拖动或者拖拽PanGesture

news2024/12/24 9:13:34

PanGesture实现控件拖动的效果,通过拖动的坐标位置调用position或者translate方法来更新UI的位置。效果见下图:

在这里插入图片描述
具体代码如下:

// xxx.ets


struct PanGestureExample {
   offsetX: number = 0
   offsetY: number = 0
  positionX: number = 0
  positionY: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All })

  build() {
    Column() {
      Column() {
        Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(50)
      .onClick(()=>{
        console.info('Pan click')
      })
      .translate({ x: this.offsetX, y: this.offsetY }) // 以组件左上角为坐标原点进行移动,此处也可以调用position({ x: this.offsetX, y: this.offsetY }) 方法
      // 左右拖动触发该手势事件
      .gesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd((event: GestureEvent) => {
            //记录拖动结束前停留的位置
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
          })
      )
    }
  }
}

通过这个PanGesture,可以实现更复杂的功能,比如ListView的item排序等,后面会写相关博文出来。
参考资料:
HarmonyOS(40) 悬浮框实现
PanGesture

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

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

相关文章

做视频混剪都是去哪里找高清素材的?分享10个高清视频素材库

提升视频混剪质感的10个高清素材库推荐 在这个视觉体验至上的时代,视频的视觉质量对吸引观众至关重要。如果你正在寻找高清素材以提升视频混剪作品的层次,那么你来对地方了。今天,我将为你揭秘10个视频混剪达人常用的高清素材库,…

html+css+js前端作业 王者荣耀官网5个页面带js

htmlcssjs前端作业 王者荣耀官网5个页面带js 下载地址 https://download.csdn.net/download/qq_42431718/89574989 目录1 目录2 目录3 项目视频 王者荣耀5个页面(带js) 页面1 页面2 页面3 页面4 页面5

大数据-46 Redis 持久化 RDB AOF 配置参数 混合模式 具体原理 触发方式 优点与缺点

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

前端文件下载word乱码问题

记录一次word下载乱码问题: 用的请求是axios库,然后用Blob去接收二进制文件 思路:现在的解决办法有以下几种,看看是对应哪种,可以尝试解决 1.将响应类型设为blob,这也是最重要的,如果没有解决…

LeetCode 2766题: 重新放置石块(原创)

【题目描述】 给你一个下标从 0 开始的整数数组 nums ,表示一些石块的初始位置。再给你两个长度 相等 下标从 0 开始的整数数组 moveFrom 和 moveTo 。 在 moveFrom.length 次操作内,你可以改变石块的位置。在第 i 次操作中,你将位置在 moveF…

C++STL详解(一)——String接口详解(上)!!!

目录 一.string类介绍 二.string类的构造赋值 2.1string类的拷贝和构造函数 2.2深拷贝 三.string类的插入 3.1push_back 3.2append 3.3操作符 3.4insert 四.string的删除 4.1pop_back 4.2erase 五.string的查找 5.1find 5.2rfind 六.string的比较 6.1compare函…

LeetCode 热题 HOT 100 (011/100)【宇宙最简单版】

【图论】No. 0200 岛屿数量 【中等】👉力扣对应题目指路 希望对你有帮助呀!!💜💜 如有更好理解的思路,欢迎大家留言补充 ~ 一起加油叭 💦 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xf…

使用AOP优化Spring Boot Controller参数:自动填充常用字段的技巧

欢迎来到我的博客,代码的世界里,每一行都是一个故事 🎏:你只管努力,剩下的交给时间 🏠 :小破站 使用AOP优化Spring Boot Controller参数:自动填充常用字段的技巧 前言为什么使用AOP为…

web网站组成

web网站由四部分组成:浏览器 前端服务器 后端服务器 数据库服务器 流程: 1.浏览器输入网站后,向前端服务器发送请求,前端服务器响应,静态的数据给浏览器。 2.前端代码中script中有url,这个是向后台发送请求的网…

项目标红,识别不了maven项目,解决办法

首先,检查 preferences 其次,检查IDEA 的 jdk。File-》Project Structure 最后: 1. 2. mvn clean install -Dmaven.test.skiptrue 跳过单元测试 maven跳过单元测试-maven.test.skip和skipTests的区别-CSDN博客

vue3+g2plot实现词云图

词云图 效果预览: 核心代码: import {WordCloud } from @antv/g2plot;fetch(https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json).then((res) => res.json()).then((data) => {const wordCloud = new WordCloud(container, {data,wordField: x,weigh…

细说MCU用DMA实现DAC输出的方法

目录 一、建立新工程 1.项目依赖的硬件 2.配置DAC 3.配置DMA 4.配置TIM3 5.选择时钟源和Debug 6.配置系统时钟 二、代码修改 1. 启动定时器和DMA 2.定义输出波形数据 3.通过MATLAB产生这个波形数据的方法 三、查看结果 用DMA的方式将位于存储器(数组)中的数据传递…

centos中zabbix安装、卸载及遇到的问题

目录 Zabbix简介Zabbix5.0和Zabbix7.0的区别监控能力方面模板和 API 方面性能、速度方面 centos7安装Zabbix(5.0)安装zabbix遇到的问题卸载Zabbix Zabbix简介 Zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。zabbix 能监视各种网络参…

三分钟带你了解Python文件操作与IO流

在探索编程世界的奇幻旅程中,文件操作和IO(输入/输出)流是每一个探险者必须掌握的基础技能。在Python的世界中,这些技能尤为关键,它们像是巫师手中的魔杖,能让我们与文件进行深度的交流。本文将带你快速了解…

springboo 整合 redis

springBoot 整合 redis starter启动依赖。—包含自动装配类—完成相应的装配功能。 引入依赖 <!--引入了redis整合springboot 的依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis&…

泵浦光与斯托克斯光相遇耦合效应的matlab模拟与仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1拉曼散射基础 4.2非线性耦合方程 5.完整程序 1.程序功能描述 泵浦光与斯托克斯光相遇耦合效应的matlab模拟与仿真. 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 &#xff0…

面试场景题系列--(2)短 URL 生成器设计:百亿短 URL 怎样做到无冲突?--xunznux

文章目录 面试场景题&#xff1a;短 URL 生成器设计&#xff1a;百亿短 URL 怎样做到无冲突&#xff1f;1. 需求分析2. 短链接生成算法2.1 自增法2.2 散列函数法2.3 预生成法 3. 部署模型3.1 其他部署方案 4. 设计4.1 重定向响应码4.2 短 URL 预生成文件及预加载4.3 用户自定义…

redis 基础命令

1.数据库命令 select 库名&#xff1b;切换库 flushdb 清空库 flushall 清空所有库 redis支持的数据类型有很多&#xff0c;使用最频繁的有String 字符串类型&#xff0c;List队列&#xff0c;Hash&#xff0c;Zset有序集合&#xff0c;Set集合。 2.字符串类型命令 表示k…

[IMX6ULL]移植NXP Linux Kernel 5.15

移植NXP Linux Kernel 5.15 2024-7-7 hongxi.zhu 1. 下载NXP Linux Kernel 5.15 仓库[nxp-imx/linux-imx] git clone -b lf-5.15.y https://github.com/nxp-imx/linux-imx.git 2. 编译NXP Linux Kernel 5.15 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- distclean make…

细说MCU用DMA改变DAC输出信号频率和改善输出波形质量的方法

目录 一、参考硬件 二、修改定时器参数改变输出波形频率 三、改善波形质量 四、代码修改 五、查看结果 一、参考硬件 本项目的软件硬件工程参考作者的其他文章&#xff1a;细说MCU用DMA实现DAC输出的方法-CSDN博客 https://wenchm.blog.csdn.net/article/details/14065…