【鸿蒙开发教程】五分钟学会HarmonyOS中的 DragView

一、前言

随着春节假期结束各行各业复产复工，一年一度的春招也持续火热起来。最近，有招聘平台发布了《2024年春招市场行情周报（第一期）》。总体来说今年的就业市场还是人才饱和的状态，竞争会比较激烈。

但是，通过报告我们也能看到让人眼前一亮的信息，比如华为鸿蒙系统对应的人才市场就呈现出“供需两旺”的场景。

不久前华为已经宣布全新HarmonyOS NEXT 鸿蒙星河版将在今年秋天正式和消费者见面，并已经面向开发者开放申请。鸿蒙星河版会有更智能、更极致的原生体验，也标志着鸿蒙迈向其发展的第二阶段。

因此，对于鸿蒙生态建设而言，2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

在学习API9的时候就写了一个DragView,用于展示某个页面的悬浮可拖动的入口，特意丰富了许多的功能，今天分享给大家～。Demo基于API11。

二、思路

因为API本身就带有拖拽的手势，所以直接使用：PanGesture，根据拖拽返回的坐标，动态的更新DragView的position坐标。即可实现拖拽的功能。
除了拖拽，还需要的是从停留位置，吸附到某个位置。我们使用animateTo，结合坐标值即可完成很好的吸附效果。

三、准备容器

使用.position(this.curPosition)来控制拖拽的UI位置。dragContentBuilder方便自定义内容，组件的复用。

 @State private curPosition: Position = { x: 0, y: 0 };
 build() {
     Stack() {
         if (this.dragContentBuilder) {
             this.dragContentBuilder()
         } else {
             this.defDragView()
         }
     }
     )
     .position(this.curPosition)
     .onClick(this.onClickListener)
 }

四、边界

一般而言，拖拽的边界肯定是当前屏幕中的，但是如果需求需要限制在某个区域，或者需要规避一些位置。所以我们准备一个边界对象，来更好的管理拖拽的边界。

 boundArea: BoundArea = new BoundArea(0, 0, px2vp(display.getDefaultDisplaySync()
         .width), px2vp(display.getDefaultDisplaySync().height))
 export class BoundArea {
     readonly start: number = 0
     readonly end: number = 0
     readonly top: number = 0
     readonly bottom: number = 0
     readonly width: number = 0
     readonly height: number = 0
     readonly centerX: number = 0
     readonly centerY: number = 0
 ​
     constructor(start: number, top: number, end: number, bottom: number) {
         this.start = start
         this.top = top
         this.end = end
         this.bottom = bottom
         this.width = this.end - this.start
         this.height = this.bottom - this.top
         this.centerX = this.width / 2 + this.start
         this.centerY = this.height / 2 + this.top
     }
 }

boundArea默认使用了整个屏幕的坐标。

五、容器大小

因为具体的UI是从外部传入的，所以宽高不确定，需要计算。我们这里使用onAreaChange,绑定到容器上：

 .onAreaChange((oldValue: Area, newValue: Area) => {
     let height = newValue.height as number
     let width = newValue.width as number
     if ((this.dragHeight != height || this.dragWidth != width) && (height != 0 && width != 0)) {
         this.dragHeight = height
         this.dragWidth = width
     }
 })

可以看到，在容器发生改变的时候，我们保存它的宽高。

六、拖拽

拖拽手势使用起来还是很简单的：

 private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });

direction决定了可以在哪个方向拖，我们显然需要所有方向。当然如果后续需要限制拖动方向，修改即可。
将拖动事件绑定到容器