【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…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...

企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...

均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...

云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...

基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...

三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...