【鸿蒙拖拽交换】原创

可可的小白鼠

发布于 2024-3-18 17:49

浏览

1收藏

【鸿蒙拖拽交换】

一、思路
二、具体实现
三、Item组件
四、父组件：包含两个子组件，并管理两个子组件。

一、思路

两个Item(取名：A、B)，分别占一个位置。拖动A时，
1、B先占一个位置：当拖拽A时，某些情况下，触发B(被动的)移动(动画)。
2、A占另一个位置：当拖拽结束后，A从手势up位置，移动到未被占用的位置。

注意1：B被动移动触发条件：比如A遮挡B至少一半的时候，一旦触发，则B移动到新位置前，将禁止再次触发（俗称防误触）
注意2：需控制症状拖动的Item的zIndex最高。

二、具体实现

拖动A
是否触发被动移动的条件，B被动移动
B移动动画
A移动动画

三、Item组件

//通过margin.Top控制Item位置（因此可以通过改变this.index改变item的位置）

.margin({ top: MarginTop[this.index] })
1.

//改变this.index

animateTo({ duration: 500, curve: Curve.Ease}, () => {
   this.index = this.index == 0 ? 1 : 0	//	只有两个，不是0就是1
})
1.
2.
3.

//保持A始终在B上面

.zIndex
1.

//手势动画。拖动A->B移动(可移动多次)…拖动结束A移动

.translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
    .gesture(PanGesture(this.panOption)
      .onActionStart((event: GestureEvent) => {
	//	此处存状态
      })
      .onActionUpdate((event: GestureEvent) => {
        this.offsetX = this.positionX + event.offsetX
        this.offsetY = this.positionY + event.offsetY

        //  触发 前置 条件
        if (this.isCanFire && this.anotherIndex == this.anotherNewIndex) {
	   // 用绝对值范围比较更好，自己去调整吧
          if (this.moveAnother_min < this.offsetY && this.offsetY < this.moveAnother_max) {
            // 满足触发条件，B移动（移动完，isCanFire会置为true）
            this.isCanFire = false
            this.anotherNewIndex = this.anotherIndex == 0 ? 1 : 0
          }
        }
      })
      .onActionEnd(() => {
        this.positionX = this.offsetX
        this.positionY = this.offsetY

        //  结束时跳到另一个没人的index，并重置offset、position
        this.upOrDown()
      })

//手势结束，A移动到空位置
upOrDown() {
    animateTo({ duration: 500, curve: Curve.Ease }, () => {
      、、
      this.offsetX = 0
      this.offsetY = 0
      this.positionX = 0
      this.positionY = 0

      //A移动
      this.index = this.anotherIndex == 0 ? 1 : 0
    })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.