HarmonyOS 组件通过onTouch改变position中Y的值，再次点击空间会跳回原位

想做一个可以拖拽的空间,通过ontouch事件修改控件的position的Y值但是手指松开再次点击到控件组件就会跳回原位，如何防止跳回原位？demo：

@State touchY: number = 0  
@State questionViewX:number = 100  
@State questionViewY:number = 100  
Stack(){  
Column(){  
      Image($r('app.media.close_circle_8a8a8a')).width('20vp').height('20vp').objectFit(ImageFit.Cover)  
      Image($r('app.media.UnionLogo')).width('60vp').height('60vp')  
    }  
    .position({x:this.questionViewX,y:this.questionViewY})  
    .onTouch((event: TouchEvent) => {  
      if(event){  
        if (event.type === TouchType.Down) {  
          this.touchY =  event.changedTouches[0].y  
        }  
        if (event.type === TouchType.Move) {  
          let dy = event.changedTouches[0].y - this.touchY  
          this.questionViewY  = 100+dy  
        }  
        if (event.type === TouchType.Up) {  
          // this.touchY = 0  
        }  
      }  
    })  
    .focusOnTouch(true)  
    .alignItems(HorizontalAlign.End)  
}

HarmonyOS

zxjiu

2024-10-09 12:39:38

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

demo中用100+dy是初始高度加位移高度，所以会回到初始高度附近，建议换成 this.questionViewY = this.questionViewY+dy。

下面这个demo可以解决移动的问题，点击也不会返回原位：

@Entry  
@Component  
struct DragPage {  
  @State message: string = 'Hello World';  
  @State touchYInit: number = 0;  
  @State questionViewX: number = 100;  
  @State questionViewY: number = 100;  
  @State isDrag: boolean = false;  
  build() {  
    Stack() {  
      Column() {  
        Image($r('app.media.ic_banner02')).width('20vp').height('20vp').objectFit(ImageFit.Cover)  
        Image($r('app.media.ic_product04')).width('60vp').height('60vp')  
      }  
      .position({ x: this.questionViewX, y: this.questionViewY })  
      .onTouch((event: TouchEvent) => {  
        if (event) {  
          console.log(event.changedTouches[0].y.toString());  
          if (event.type === TouchType.Down) {  
            this.touchYInit = event.changedTouches[0].windowY - this.questionViewY;  
          }  
          if (event.type === TouchType.Move) {  
            this.questionViewY = event.changedTouches[0].windowY - this.touchYInit;  
          }  
        }  
      })  
      .focusOnTouch(true)  
      .alignItems(HorizontalAlign.End)  
    }  
  }  
}