HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向

HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向

一个控件监听手势,滑动的时候 直接操作 ,拖动的时候 按照拖动的距离 将控件进行移位 现在使用了 组合手势 一直走滑动这里

2 回复

拖动的参考demo如下:

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) offsetX: number = 0;
  [@State](/user/State) offsetY: number = 0;
  [@State](/user/State) count: number = 0;
  [@State](/user/State) positionX: number = 0;
  [@State](/user/State) positionY: number = 0;
  [@State](/user/State) borderStyles: BorderStyle = BorderStyle.Solid
  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
    }
    // 绑定translate属性可以实现组件的位置移动
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
    .gesture(
      // 声明该组合手势的类型为Sequence类型
      GestureGroup(GestureMode.Sequence,
        // 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
        LongPressGesture({ repeat: true })
          // 当长按手势识别成功,增加Text组件上显示的count次数
          .onAction((event: GestureEvent|undefined) => {
            if(event){
              if (event.repeat) {
                this.count++;
              }
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 当长按之后进行拖动,PanGesture手势被触发
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
          .onActionUpdate((event: GestureEvent|undefined) => {
            if(event){
              this.offsetX = this.positionX + event.offsetX;
              this.offsetY = this.positionY + event.offsetY;
            }
            console.info('pan update');
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.borderStyles = BorderStyle.Solid;
          })
      )
    )
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

priorityGesture(带优先级的手势绑定方法)去分别判断拖动和滑动的时机,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-gesture-settings-V13#绑定手势识别

PanGesture,拖动手势事件,当滑动的最小距离超过设定的最小值时触发拖动手势事件,他是有个滑动的最小距离的,参考文档:PanGesture-手势处理-组件通用信息-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)

目前没有这样的案例, PanGesture有参数distance为用于指定触发拖动手势事件的最小拖动距离,单位为vp。

更多关于HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,要为一个控件同时识别滑动和拖动(即组合手势),可以利用GestureDetector组件。GestureDetector支持多种手势的识别,包括滑动和拖动。

对于滑动方向的判断,可以在onFling回调方法中进行处理。onFling方法会传递四个参数:e1(第一个事件的坐标)、e2(第二个事件的坐标)、velocityX(X轴上的速度)、velocityY(Y轴上的速度)。通过比较e1e2的坐标,可以判断滑动的方向。例如,如果e2.getX() - e1.getX()的值大于某个阈值且Math.abs(e2.getY() - e1.getY())小于该阈值,则可以判定为水平向右滑动;反之,如果e1.getX() - e2.getX()的值大于阈值,则为水平向左滑动。同理,可以判断垂直方向的滑动。

拖动(长按并移动)则可以通过onScroll回调方法进行处理,该方法会在用户拖动时持续被调用。

在实际开发中,可以通过设置GestureDetector的监听器来同时处理这两种手势,并在相应的回调方法中实现具体逻辑。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部