【HarmonyOS Next 自定义可拖拽image】
效果图:
代码:
import display from "@ohos.display"
import { AppUtil } from "@pura/harmony-utils"/*** 自定义可拖拽图标组件*/
@Component
export default struct DraggableImage {imageResource?: ResourceimageHeight: number = 50 //单位:vpimageWidth: number = 50 //单位:vp//图标初始位置,默认在左上角startLocationX:number = 0startLocationY:number = 0marginLeft:number = 0marginRight:number = 0marginTop:number = 0marginBottom:number = 0@State private offsetX: number = 0@State private offsetY: number = 0@State private positionX: number = 0@State private positionY: number = 0//屏幕宽private screenWidth: number = 0private screenHeight: number = 0// 定义贴边的阈值(距离边缘多少像素时触发贴边)private snapThreshold: number = 50; //单位:vpaboutToAppear(): void {this.screenWidth = px2vp(display.getDefaultDisplaySync().width)-this.marginRightthis.screenHeight = px2vp(display.getDefaultDisplaySync().height - AppUtil.getStatusBarHeight() - AppUtil.getNavigationIndicatorHeight())-this.marginBottomthis.snapThreshold = this.screenWidth / 2console.info('DraggableImage aboutToAppear ' + this.screenWidth + " " + this.screenHeight)this.offsetX= this.startLocationX;this.offsetY= this.startLocationY;this.positionX= this.startLocationX;this.positionY= this.startLocationY;}aboutToDisappear(): void {}build() {Image(this.imageResource).height(this.imageHeight).width(this.imageWidth).draggable(false).position({x: this.offsetX,y: this.offsetY})//.translate({ x: this.offsetX, y: this.offsetY, z: 0 })// 以组件左上角为坐标原点进行移动// 左右滑动触发该手势事件.gesture(PanGesture().onActionStart((event: GestureEvent) => {console.info('DraggableImage start')}).onActionUpdate((event: GestureEvent) => {if (event) {// 计算新的位置let newOffsetX = this.positionX + event.offsetX;let newOffsetY = this.positionY + event.offsetY;// 防止图标滑出左边界if (newOffsetX < this.marginLeft) {newOffsetX = this.marginLeft;}// 防止图标滑出右边界if (newOffsetX + this.imageWidth > this.screenWidth) { // imageWidth 是图标的宽度newOffsetX = this.screenWidth - this.imageWidth;}// 防止图标滑出上边界if (newOffsetY < this.marginTop) {newOffsetY = this.marginTop;}// 防止图标滑出下边界if (newOffsetY + this.imageHeight > this.screenHeight) { // imageHeight 是图标的高度newOffsetY = this.screenHeight - this.imageHeight;}// 更新图标位置this.offsetX = newOffsetX;this.offsetY = newOffsetY;console.info('DraggableImage onActionUpdate ' + this.offsetX + " " + this.offsetY)}}).onActionEnd((event: GestureEvent) => {let newOffsetX = this.marginLeft// 检查是否靠近左边缘if (this.offsetX < this.snapThreshold) {newOffsetX = this.marginLeft; // 贴到左边缘} else if (this.offsetX + this.imageWidth > this.screenWidth - this.snapThreshold) { // imageWidth 是图标的宽度// 检查是否靠近右边缘newOffsetX = this.screenWidth - this.imageWidth; // 贴到右边缘} else {newOffsetX = this.marginLeft}// 检查是否靠近上边缘/* if (this.offsetY < this.snapThreshold) {this.offsetY = 0; // 贴到上边缘}// 检查是否靠近下边缘else if (this.offsetY + 50 > this.screenHeight - this.snapThreshold) { // 50 是图标的高度this.offsetY = this.screenHeight - 50; // 贴到下边缘}*/animateTo({ duration: 300, curve: Curve.Linear }, () => {this.offsetX = newOffsetX;})this.positionX = this.offsetXthis.positionY = this.offsetYconsole.info('DraggableImage end')}))}
}
关键代码处都做了注释,这里也不在过多说明啦。
这里用了一个工具类 harmony-utils 来获取状态栏高度和底部导航栏高度,大家自行下载。
如何使用 DraggablePage.ets:
import DraggableImage from './DraggableImage'
import { display } from '@kit.ArkUI'
import { AppUtil } from '@pura/harmony-utils'@Entry
@Component
struct DraggablePage {marginBottom: number = 30marginRight: number = 10imageSize: number = 50build() {Column() {Stack({ alignContent: Alignment.Center }) {Text("我是内容布局").fontSize(30).fontColor(Color.Black)DraggableImage({imageResource: $r('app.media.update'),imageHeight: this.imageSize,imageWidth: this.imageSize,startLocationX: px2vp(display.getDefaultDisplaySync().width) - this.imageSize - this.marginRight,startLocationY: px2vp(display.getDefaultDisplaySync().height - AppUtil.getStatusBarHeight() - AppUtil.getNavigationIndicatorHeight()) - this.imageSize - this.marginBottom,marginTop: this.marginBottom,marginBottom: this.marginBottom,marginLeft: this.marginRight,marginRight: this.marginRight,})//注意:拖拽图标的边距,不能这样设置// .margin({ bottom: this.marginBottom, right: this.marginRight })}.width('100%').layoutWeight(1)}.backgroundColor('#ffde7b7b').width('100%').height('100%')}
}
如果你不想设置拖拽图标的 margin ,这样写就行:
DraggableImage({imageResource: $r('app.media.update'),imageHeight: this.imageSize,imageWidth: this.imageSize,})
相关文章:

【HarmonyOS Next 自定义可拖拽image】
效果图: 代码: import display from "ohos.display" import { AppUtil } from "pura/harmony-utils"/*** 自定义可拖拽图标组件*/ Component export default struct DraggableImage {imageResource?: ResourceimageHeight: numbe…...
解决No module named ‘llama_index.llms.huggingface‘
执行下面的脚本,报错No module named llama_index.llms.huggingface’执行下面的脚本,报错No module named llama_index.llms.huggingface’执行下面的脚本,报错No module named llama_index.llms.huggingface’执行下面的脚本,报…...

SearchBar组件的功能与用法
文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"Material3中的IconButton"相关的内容,本章回中将介绍SearchBar组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…...
13.推荐系统的性能优化
接下来我们将学习推荐系统的性能优化。推荐系统的性能优化对于提升推荐结果的生成速度和系统的可扩展性至关重要,尤其是在处理大规模数据和高并发请求时。在这一课中,我们将介绍以下内容: 性能优化的重要性常见的性能优化方法实践示例 1. 性…...

Grafana-使用Button修改MySQL数据库
背景 众所周知,Grafana是一个用来展示数据的平台,但是有时候还是会有需求说能不能有一个按钮,点击的时候再对数据库进行修改,从而达到更新数据的效果 经过多方查证,终于实现了一个简单的,点击button执行sq…...
飞科FH6218电吹风异响维修
前言 本文仅记录一次普通的维修经历,解决方案也都是从网上查找资料得来,仅供参考,如有不对请指出,谢谢! 现象 使用时出现异响,风速越大越响 参考视频 https://www.bilibili.com/video/BV1dD4y1x7hH/?…...

分治下的快速排序(典型算法思想)—— OJ例题算法解析思路
目录 一、75. 颜色分类 - 力扣(LeetCode) 运行代码: 一、算法核心思想 二、指针语义与分区逻辑 三、操作流程详解 四、数学正确性证明 五、实例推演(数组[2,0,2,1,1,0]) 六、工程实践优势 七、对比传统实现 八、潜在问题与解决方案 九、性能测试数据 十、扩展…...

Unity3D实现显示模型线框(shader)
系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示👉二、第一种方式👉二、第二种方式👉壁纸分享👉总结👉前言 在 Unity 中显示物体线框主要基于图形渲染管线和特定的渲染模式。 要显示物体的线框,通常有两种常见的方法:一种是利用内置的渲染…...

深度剖析责任链模式
一、责任链模式的本质:灵活可扩展的流水线处理 责任链模式(Chain of Responsibility Pattern)是行为型设计模式的代表,其核心思想是将请求的发送者与接收者解耦,允许多个对象都有机会处理请求。这种模式完美解决了以下…...

基于 openEuler 构建 LVS-DR 群集
一、 对比 LVS 负载均衡群集的 NAT 模式和 DR 模式,比较其各自的优势 。 二、 基于 openEuler 构建 LVS-DR 群集。 一 NAT 模式 部署简单:NAT 模式下,所有的服务器节点只需要连接到同一个局域网内,通过负载均衡器进行网络地址转…...

CSS3+动画
浏览器内核以及其前缀 css标准中各个属性都要经历从草案到推荐的过程,css3中的属性进展都不一样,浏览器厂商在标准尚未明确的情况下提前支持会有风险,浏览器厂商对新属性的支持情况也不同,所有会加厂商前缀加以区分。如果某个属性…...

使用DeepSeek和Kimi快速自动生成PPT
目录 步骤1:在DeepSeek中生成要制作的PPT主要大纲内容。 (1)在DeepSeek网页端生成 (2)在本地部署DeepSeek后,使用chatBox生成PPT内容 步骤2:将DeepSeek成的PPT内容复制到Kimi中 步骤3&…...
DeepSeek使用最佳实践
一、核心使用原则 任务结构化设计 明确目标:例如用“我需要生成包含5个功能的Python计算器代码”而非简单“帮我写代码”。分步拆解:复杂任务可拆成“需求分析->框架搭建->代码生成->测试验证”等阶段。格式约束:明确输出格式&…...

机器学习 - 进一步理解最大似然估计和高斯分布的关系
一、高斯分布得到的是一个概率吗? 高斯分布(也称为正态分布)描述的是随机变量在某范围内取值的概率分布情况。其概率密度函数(PDF)为: 其中,μ 是均值,σ 是标准差。 需要注意的是…...

Oracle常用导元数据方法
1 说明 前两天领导发邮件要求导出O库一批表和索引的ddl语句做国产化测试,涉及6个系统,6千多张表,还好涉及的用户并不多,要不然很麻烦。 如此大费周折原因,是某国产库无法做元数据迁移。。。额,只能我手动导…...

linux安装jdk 许可证确认 user did not accept the oracle-license-v1-1 license
一定要接受许可证,不然会出现 一、添加 ppa第三方软件源 sudo add-apt-repository ppa:ts.sch.gr/ppa二、更新系统软件包列表 sudo apt-get update三、接受许可证 echo debconf shared/accepted-oracle-license-v1-1 select true | sudo debconf-set-selection…...

Spring基于文心一言API使用的大模型
有时做项目我们可能会遇到要在项目中对接AI大模型 本篇文章是对使用文心一言大模型的使用总结 前置任务 在百度智能云开放平台中注册成为开发者 百度智能云开放平台 进入百度智能云官网进行登录,点击立即体验 点击千帆大模型平台 向下滑动,进入到模型…...
【Elasticsearch】derivative聚合
1.定义与用途 derivative聚合是一种管道聚合(pipeline aggregation),用于计算指定度量(metric)的变化率。它通过计算当前值与前一个值之间的差异来实现这一点。这种聚合特别适用于分析时间序列数据,例如监…...

4.7.KMP算法(新版)
一.回顾:KMP算法基于朴素模式匹配算法优化而得来的 朴素模式匹配算法核心思想:把主串中所有长度与模式串长度相等的子串与模式串进行对比,直到找到第一个完全匹配的子串为止,如果当前尝试匹配的子串在某一个位置匹配失败…...
iOS AES/CBC/CTR加解密以及AES-CMAC
感觉iOS自带的CryptoKit不好用,有个第三方库CryptoSwift还不错,好巧不巧,清理过Xcode缓存后死活下载不下来,当然也可以自己编译个Framework,但是偏偏不想用第三方库了,于是研究了一下,自带的Com…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...
git: early EOF
macOS报错: Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...

倒装芯片凸点成型工艺
UBM(Under Bump Metallization)与Bump(焊球)形成工艺流程。我们可以将整张流程图分为三大阶段来理解: 🔧 一、UBM(Under Bump Metallization)工艺流程(黄色区域ÿ…...
stm32进入Infinite_Loop原因(因为有系统中断函数未自定义实现)
这是系统中断服务程序的默认处理汇编函数,如果我们没有定义实现某个中断函数,那么当stm32产生了该中断时,就会默认跑这里来了,所以我们打开了什么中断,一定要记得实现对应的系统中断函数,否则会进来一直循环…...
VUE3 ref 和 useTemplateRef
使用ref来绑定和获取 页面 <headerNav ref"headerNavRef"></headerNav><div click"showRef" ref"buttonRef">refbutton</div>使用ref方法const后面的命名需要跟页面的ref值一样 const buttonRef ref(buttonRef) cons…...