【鸿蒙拖拽交换】 原创

可可的小白鼠
发布于 2024-3-18 17:49
浏览
1收藏

@toc
【鸿蒙拖拽交换】-鸿蒙开发者社区

一、思路

两个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] })

//改变this.index

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

//保持A始终在B上面

.zIndex

//手势动画。拖动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
    })
  }

四、父组件:包含两个子组件,并管理两个子组件。

原则上,父组件内可以有n个子组件,均可以拖来拖去、移动位置。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-3-18 17:55:34修改
1
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
可可的小白鼠
可可的小白鼠

2
回复
2024-3-19 12:08:43
回复
    相关推荐