HarmonyOS Next中如何实现长按某个控件后拖动控件控件可以跟随手指移动？

Question

如题：HarmonyOS Next中如何实现长按某个控件后拖动控件控件可以跟随手指移动？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以使用组合手势的顺序识别，当长按手势事件结束后触发拖动手势事件。在手势回调方法里获取event（GestureEvent类型）的fingerList（FingerInfo[]类型），获取到localX和localY数值，表示相对于当前组件元素原始区域左上角的坐标地址。可参考如下代码：

import { promptAction } from '@kit.ArkUI'; 
 
@Component 
struct CoordinatesOfTheFingerTouchPoint { 
  @State count: number = 0; 
  private touchAreaRight: number = 0; 
  private touchAreaBottom: number = 0; 
  @State positionX: number = 0; 
  @State positionY: number = 0; 
  @State gestureEventInfo: string = ''; 
 
  build() { 
    Column() { 
      Row() { 
        Column() { 
          Text('+') 
            .fontSize(28) 
            .position({ x: this.positionX, y: this.positionY }) 
        } 
        .height(200) 
        .width('100%') 
        .backgroundColor('#F1F3F5') 
        .onAreaChange((oldValue: Area, newValue: Area) => { 
          this.touchAreaRight = newValue.width as number; 
          this.touchAreaBottom = newValue.height as number; 
        }) 
        .gesture( 
          // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 
          GestureGroup(GestureMode.Sequence, 
            LongPressGesture({ repeat: true }) 
              .onAction((event: GestureEvent) => { 
                if (event.repeat) { 
                  this.count++; 
                } 
              }), 
            PanGesture() 
              .onActionStart(() => { 
                promptAction.showToast({ message: 'Pan start', duration: 1000 }); 
              }) 
              .onActionUpdate((event: GestureEvent) => { 
                for (let i = 0; i < event.fingerList.length; i++) { 
                  if (event.fingerList[i] == undefined 
                    || event.fingerList[i].localX < 0 
                    || event.fingerList[i].localY < 0 
                    || event.fingerList[i].localX > this.touchAreaRight 
                    || event.fingerList[i].localY > this.touchAreaBottom) { 
                    return; 
                  } 
                  this.positionX = event.fingerList[i].localX; 
                  this.positionY = event.fingerList[i].localY; 
                } 
                this.gestureEventInfo = 'sequence gesture\n' + 'LongPress onAction' + this.count 
                  + '\nX:' + this.positionX + '\nY:' + this.positionY; 
              }) 
              .onActionEnd(() => { 
                promptAction.showToast({ message: 'Pan end', duration: 1000 }); 
              }) 
          ) 
            .onCancel(() => { 
              promptAction.showToast({ message: '取消', duration: 1000 }); 
            }) 
        ) 
      } 
      .padding(12) 
      .borderRadius(24) 
      .backgroundColor(Color.White) 
 
      Text(this.gestureEventInfo) 
        .fontSize(18) 
        .width('100%') 
        .textAlign(TextAlign.Start) 
        .padding({ left: 18, top: 30 }) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor('#F1F3F5') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。