【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…...
基于扑克牌分发效果制作时的问题总结
其基本效果如图 1. 在overlay模式下直接使用position来移动 实现代码 public class Card : MonoBehaviour {public RectTransform target;public Button cardButton;private bool isPack false;public List<RectTransform> cards new List<RectTransform>(…...
为多个GitHub账户配置SSH密钥
背景 当需要同时使用多个GitHub账户(例如工作和个人账户)时,默认的SSH配置可能导致冲突。本文介绍如何通过生成不同的SSH密钥对并配置SSH客户端来管理多个账户。 操作步骤 生成SSH密钥对 为每个GitHub账户生成独立的密钥对,并指…...
三步本地部署deepseekr1,支持macOs,ubuntu,Windows
一、ollama安装: ollama官网:Ollama Ollama 是一款支持在 Windows、macOS 和 Linux 上本地运行大型语言模型的工具。以下是针对不同操作系统的安装指南: 1、Windows 系统 下载安装包:访问 Ollama 官方下载页面,选择适用于 Windows 的安装包进行下载。 运行安装程序:下…...
STM32 HAL库 CANbus通讯(C语言)
#include "main.h" #include "stm32f1xx_hal.h"CAN_HandleTypeDef hcan; CAN_TxHeaderTypeDef TxHeader; CAN_RxHeaderTypeDef RxHeader; uint8_t TxData[8]; uint8_t RxData[8]; uint32_t TxMailbox;void CAN_Init(void) {// 使能CAN时钟__HAL_RCC_CAN1_C…...
Cotex-M系列介绍
一、芯片设计公司——ARM ARM公司:只做内核设计和IP授权,不参与芯片设计 二、Cortex内核分类及特征...
测试自动化落地方向
一、视觉回归自动化测试(低成本高回报) 痛点: UI 频繁迭代导致视觉问题难覆盖 方案: 引入Applitools或SikuliX做视觉比对(无需维护元素定位) 关键路径截图比对,自动检测 UI 错位/样式问题 亮点…...
如何通过优化网站结构提高SEO效果?
很多人以为,SEO就是写写关键词,发点外链,但其实,网站结构才是排名的地基!你可以把网站想象成一栋房子,框架没搭好,装饰再漂亮也没用,迟早会塌。同样的道理,如果网站结构混…...
迅雷下载的原理和使用协议的分析
迅雷作为一款广泛使用的下载工具,其核心原理是通过整合多种下载协议和资源分发技术来提升下载速度。以下是对其原理及协议的详细分析: 一、迅雷下载的核心原理 多协议混合下载(P2SP) P2SP(Peer-to-Server-Peer…...
RPA与深度学习结合
什么是RPA RPA即机器人流程自动化(Robotic Process Automation),它是一种利用软件机器人模拟人类在计算机上的操作,按照预设的规则自动执行一系列重复性、规律性任务的技术。这些任务可以包括数据录入、文件处理、报表生成、系统…...
Linux内核模块参数与性能优化:__read_mostly属性的深度剖析
在Linux内核开发中,模块参数和性能优化是两个至关重要的主题。模块参数允许开发者和用户在加载内核模块时动态配置模块的行为,而性能优化则是确保内核高效运行的关键。本文将深入探讨Linux内核中的模块参数机制以及__read_mostly属性的使用,通过实际代码示例和详细解释,帮助…...
Elasticsearch:如何使用 Elastic 检测恶意浏览器扩展
作者:来着 Elastic Aaron Jewitt 当你的 CISO 询问你的任何工作站上是否安装过特定的浏览器扩展时,你多快能得到正确答案?恶意浏览器扩展是一个重大威胁,许多组织无法管理或检测。这篇博文探讨了 Elastic Infosec 团队如何使用 os…...
基于Java的远程视频会议系统(源码+系统+论文)
第一章 概述 1.1 本课题的研究背景 随着人们对视频和音频信息的需求愈来愈强烈,追求远距离的视音频的同步交互成为新的时尚。近些年来,依托计算机技术、通信技术和网络条件的发展,集音频、视频、图像、文字、数据为一体的多媒体信息ÿ…...
SAP-ABAP:FOR ALL ENTRIES IN用法详解带实例代码
在 SAP ABAP 中,FOR ALL ENTRIES IN 是 SELECT 语句中一个非常常用的功能,用于根据内表中的数据查询数据库表。它的主要作用是将内表中的数据作为查询条件,从数据库表中筛选出符合条件的数据。 1. 基本语法 SELECT <fields>FROM <d…...
构建jdk17包含maven的基础镜像
1、先拉取jdk17基础镜像 docker pull openjdk:17-jdk-alpine 2、使用jdk17基础镜像创建容器 docker run -it openjdk:17-jdk-alpine sh 或 docker run -it --name jdk17 openjdk:17-jdk-alpine sh 3、修改镜像源地址 cat /etc/apk/repositories https://mirrors.aliyun.com…...
【Android】版本和API对应关系表
目录 版本和API对应关系表 不积跬步,无以至千里;不积小流,无以成江海。要沉下心来,诗和远方的路费真的很贵! 版本和API对应关系表 版本名版本号名称APIAndroid 1616.0W36Android 1515.0V35Android 1414.0U34Android 1…...
Spring Boot 整合 JPA 实现数据持久化
目录 前言 一、JPA 核心概念与实体映射 1. 什么是 JPA? 2. JPA 的主要组件 3. 实体映射 4. 常见的字段映射策略 二、Repository 接口与自定义查询 1. 什么是 Repository 接口? 2. 动态查询方法 3. 自定义查询 4. 分页与排序 三、实战案例&…...
KUKA 机器人仿真——Simpro4.1和OfficeLite8.6.2 连接实现虚拟示教器
一、准备软件 1、Simpro4.1,是一机一密钥,不好破解,我在某宝买的,省事了。 2、OfficeLite8.6.2,看我的博文的第三步虚拟机内安装OfficeLite8.6.2 KUKA示教器仿真软件OfficeLite8.6.2,EthernetKRL3.1.3通信…...
IntelliJ IDEA使用经验(十三):使用Git克隆github的开源项目
文章目录 问题背景办法1、设置git代理;2、再次克隆项目;3、再次按常规方式进行git克隆即可。 问题背景 由于github在国外,很多时候我们在使用idea克隆开源项目的时候,没办法检出,提示 连接重置。 办法 1、设置git代…...
互联网大厂中面试的高频计算机网络问题及详解
前言 哈喽各位小伙伴们,本期小梁给大家带来了互联网大厂中计算机网络部分的高频面试题,本文会以通俗易懂的语言以及图解形式描述,希望能给大家的面试带来一点帮助,祝大家offer拿到手软!!! 话不多说,我们立刻进入本期正题! 一、计算机网络基础部分 1 先来说说计算机网…...
综合实验练习实验报告
一、需求分析 1.防火墙上配置DHCP服务,完成接口配置 2.用户建立以及认证策略建立 3.安全策略建立 二、详细配置 DHCP配置 [FW1]dhcp enable [FW1]int g1/0/1.1 [FW1-GigabitEthernet1/0/1.1]dhcp select interface [FW1]int g1/0/1.2 [FW1-GigabitEthernet…...
Ubuntu22.04 配置deepseek知识库
文章目录 安装 docker配置 dify配置 ollama创建大模型 安装 docker 更新系统:sudo apt update sudo apt upgrade -y安装必要的依赖:sudo apt install apt-transport-https ca-certificates curl software-properties-common -y添加 Docker 的官方 GPG 密…...
如何在WPS和Word/Excel中直接使用DeepSeek功能
以下是将DeepSeek功能集成到WPS中的详细步骤,无需本地部署模型,直接通过官网连接使用:1. 下载并安装OfficeAI插件 (1)访问OfficeAI插件下载地址:OfficeAI助手 - 免费办公智能AI助手, AI写作,下载…...
Mp4视频播放机无法播放视频-批量修改视频分辨率(帧宽、帧高)
背景 家人有一台夏新多功能 视频播放器(夏新多功能 视频播放器),用来播放广场舞。下载了一些广场舞视频, 只有部分视频可以播放,其他视频均无法播放,判断应该不是帧速率和数据速率的限制, 分析可能是播放器不支持帧高度大于720的视频。由于视频文件较多,需要借助视频编…...
jvm 线程监控调试
文章目录 前言一、使用JDK工具转储线程文件(如jstack)1. 找到Java进程的PID:2. 使用jstack生成线程转储文件:3.验证生成的线程转储文件:二、分析文件1.使用在线工具进行分析上传thread-dump文件,等待解析完成2.查看分析结果总结前言 提示:使用jdk自带工具转储线程监控文…...
超越 DeepSeek V3 -->【Qwen2.5-Max】
🔥 先说明,不是广子,不是广子!!!单纯分享这个工具给大家,毕竟最近使用 DeepSeek 太容易崩了,每天深度思考一次之后就开始转圈圈用不了,然后就找到了这个工具使用 一、前言…...
301.华为交换机堆叠技术基础
华为交换机堆叠技术基础 一、概念及原理部分1.堆叠简介1.1 什么是堆叠1.2 可靠性网络架构1.3 华为堆叠设备1.4 其他厂商的堆叠2.堆叠的示意图3.堆叠的应用3.1 中小企业3.2 园区网4.堆叠的原理4.1基本的概念4.2 堆叠建立4.3 角色选举4.4 版本同步4.5 配置同步4.6 堆叠系统的登录…...
【开源AI】AI一页一页读PDF
【开源AI】AI一页一页读PDF 可以在这里看 : 让AI 处理 PDF 文件,提取其中的知识点,并生成总结。 只是无法修改,后续若有更新在csdn这里。 【OpenAI】 API 更新: JSON 结构化输出约束机制( JSON Schema) 的一次实战。知识库的JSON Schema形式 每一页都要总结,总结的知识…...
Spring AI 介绍
文章来源:AI 概念 (AI Concepts) _ Spring AI1.0.0-SNAPSHOT中文文档(官方文档中文翻译)|Spring 教程 —— CADN开发者文档中心 本节介绍 Spring AI 使用的核心概念。我们建议仔细阅读它,以了解 Spring AI 是如何实现的。 模型 AI 模型是旨在处理和生成…...
React - 事件绑定this
在 React 中,this 的绑定是一个常见问题,尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。 bind 函数的作用 bind() 方法创建一个新的函数,当被调用时,其 this 关键字被设置为提供的…...
【3.Git与Github的历史和区别】
目录 Git的历史和Github的区别本质和功能 Git的历史和Github的区别 Git是由Linux内核的创造者Linus Torvalds于2005年创建的。当时,Linux内核开源项目使用BitKeeper作为版本控制系统,但2005年BitKeeper的商业公司终止了与Linux社区的合作,收…...
【设计模式】【行为型模式】职责链模式(Chain of Responsibility)
👋hi,我不是一名外包公司的员工,也不会偷吃茶水间的零食,我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 📫 欢迎V: flzjcsg2,我们共同讨论Java深渊的奥秘 …...
【算法学习】二分查找开区间写法总结
根据灵神教学中的二分查找开区间写法进行如下总结: 我们需要注意的是,lowerBound 模板求解的是 > target 的最小下标 private int lowerBound(int[] nums, int target) {int left -1;int right nums.length; // 开区间 (left, right)while (left …...
信息科技伦理与道德3-2:智能决策
2.2 智能推荐 推荐算法介绍 推荐系统:猜你喜欢 https://blog.csdn.net/search_129_hr/article/details/120468187 推荐系统–矩阵分解 https://blog.csdn.net/search_129_hr/article/details/121598087 案例一:YouTube推荐算法向儿童推荐不适宜视频 …...
【干活分享】2025年可以免费问答的一些GPT网站-deepseek等免费gpt
2025年已经到来,大家也都陆续回归到忙碌的工作中。在新的一年里,如何更高效地完成工作任务,提升工作效率,是很多人关心的问题。今天,就为大家分享一些实用性很强的GPT网站,帮助大家在工作中事半功倍。 Dee…...
webpack配置之---入口
entry 单入口 由于一般的单页面项目只有一个入口,也就是单入口,单入口的配置方式有以下三种方式,如果有遗漏的欢迎补充 1、字符串方式 以下这几行代码解释: entry:本项目的入口文件 output:本项目打包…...
Golang GORM系列:GORM CRUM操作实战
在数据库管理中,CRUD操作是应用程序的主干,支持数据的创建、检索、更新和删除。强大的Go对象关系映射库GORM通过抽象SQL语句的复杂性,使这些操作变得轻而易举。本文是掌握使用GORM进行CRUD操作的全面指南,提供了在Go应用程序中有效…...
[M模拟] lc380. O(1) 时间插入、删除和获取随机元素(模拟+数据结构+脑筋急转弯+数组快捷删除技巧+项目思考)
文章目录 1. 题目来源2. 题目解析 1. 题目来源 链接:380. O(1) 时间插入、删除和获取随机元素 题单: 待补充 2. 题目解析 其实这个题目抽象一下的话在项目中也能出现,可能日常项目中没有算法基础的话,就很容易直接去进行新内…...
30~32.ppt
目录 30.导游小姚-介绍首都北京❗ 题目 解析 31.小张-旅游产品推广文章 题目 解析 32.小李-水的知识❗ 题目 解析 30.导游小姚-介绍首都北京❗ 题目 解析 新建幻灯片-从大纲-重置-检查设计→主题对话框→浏览主题:考生文件夹(注意&#x…...
一键查看电脑各硬件详细信息 轻松查看电脑硬件参数
今天为大家推荐两款非常实用的电脑硬件查看软件,它们能够一键快速查看电脑的各种配置信息,使用起来非常方便。 一键查看电脑各硬件详细信息 这款软件是绿色版的,无需安装,打开即可使用,文件大小仅为900多KB࿰…...
java如何创建自定义异常?
在Java中,创建自定义异常通常需要继承Exception类或其子类。以下是创建自定义异常的基本步骤: 定义异常类:创建一个新的类,继承自Exception或RuntimeException(根据需要选择)。 构造方法:提供一…...
2025/2/10 心得
第一题。J. C - Grand Garden (AI) 问题陈述 在一个花坛里,有 NN 朵花,编号为 1,2,\ldots,N1,2,…,N。最初,所有花的高度都是 00。你将得到一个高度序列 h{h\_1,h\_2,h\_3,\ldots\} 作为输入。你希望通过重复以下“浇水”操作来将所有花的编…...
Visual Studio 2022 中使用 Google Test
要在 Visual Studio 2022 中使用 Google Test (gtest),可以按照以下步骤进行: 安装 Google Test:确保你已经安装了 Google Test。如果没有安装,可以通过 Visual Studio Installer 安装。在安装程序中,找到并选择 Googl…...
软开关和硬开关
硬开关: 电路结构相对简单,一般只包含基本的开关管、电源、负载等元件,没有专门的谐振电路来辅助开关过程。 开关管在导通或关断时,电压或电流的变化率非常快,形成急剧的开关过程。开通时,开关器件的电流…...
C++17中的std::clamp:限制值的范围
文章目录 一、背景与动机二、std::clamp的定义三、使用示例示例1:基本用法示例2:浮点数和自定义类型 四、实际应用场景1. 游戏开发2. 图形处理3. 数值计算 五、注意事项六、总结 在C17中, std::clamp是一个极为实用的算法,它能够…...
Python的
& 运算符可用于不同集合类型,它主要用于集合的交集操作 下面分别介绍它在 set(集合)和 frozenset(不可变集合)这两种常见集合类型中的使用 set 类型 set 是 Python 中内置的可变集合类型,使用 & …...
计算机毕业设计Spark+大模型知网文献论文推荐系统 知识图谱 知网爬虫 知网数据分析 知网大数据 知网可视化 预测系统 大数据毕业设计 机器学习
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
13.8 聚焦应用场景的Prompt设计实战:从通用到领域专用的翻译质量跃升
聚焦应用场景的Prompt设计实战:从通用到领域专用的翻译质量跃升 关键词:领域特定Prompt设计、翻译质量优化、动态术语控制、多阶段推理链、Prompt版本管理 1. 翻译Prompt设计核心原则 1.1 领域知识深度渗透 def build_medical_prompt(): return ChatPromptTemplate.from_…...
基础入门-HTTP数据包红蓝队研判自定义构造请求方法请求头修改状态码判断
知识点: 1、请求头&返回包-方法&头修改&状态码等 2、数据包分析-红队攻击工具&蓝队流量研判 3、数据包构造-Reqable自定义添加修改请求 一、演示案例-请求头&返回包-方法&头修改&状态码等 数据包 客户端请求Request 请求方法 …...
Golang Web单体项目目录结构最佳实践
在Golang 开发Web 项目的过程中,如何组织目录结构是一项至关重要的任务。合理的目录结构不仅能提高代码的可维护性,还能为团队协作提供清晰的代码规范。 为什么要设计合理的目录结构? 在 Golang 项目中,代码的组织方式会影响开发…...