效果图：
代码：
import display from "@ohos.display"
import { AppUtil } from "@pura/harmony-utils"/*** 自定义可拖拽图标组件*/
@Component
export default struct DraggableImage {imageResource?: ResourceimageHeight: number = 30 //单位：vpimageWidth: number = 30 //单位：vp@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.screenHeight = px2vp(display.getDefaultDisplaySync().height - AppUtil.getStatusBarHeight() - AppUtil.getNavigationIndicatorHeight())this.snapThreshold = this.screenWidth / 2console.info('DraggableImage aboutToAppear ' + this.screenWidth + " " + this.screenHeight)}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 < 0) {newOffsetX = 0;}// 防止图标滑出右边界if (newOffsetX + this.imageWidth > this.screenWidth) { // imageWidth 是图标的宽度newOffsetX = this.screenWidth - this.imageWidth;}// 防止图标滑出上边界if (newOffsetY < 0) {newOffsetY = 0;}// 防止图标滑出下边界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 = 0// 检查是否靠近左边缘if (this.offsetX < this.snapThreshold) {newOffsetX = 0; // 贴到左边缘} else if (this.offsetX + this.imageWidth > this.screenWidth - this.snapThreshold) { // imageWidth 是图标的宽度// 检查是否靠近右边缘newOffsetX = this.screenWidth - this.imageWidth; // 贴到右边缘} else {newOffsetX = 0}// 检查是否靠近上边缘/* 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 来获取状态栏高度和底部导航栏高度，大家自行下载。
如何使用:
DraggableImage({imageResource:$r('app.media.update'), imageWidth:30, imageHeight:30}).visibility(this.showSetTop()).margin({ bottom: 30, right: 10 }).onClick(() => {this.controller.pageUp(true)})
