HarmonyOS鸿蒙Next中快滑手势怎么判断滑动的方向？是上下左右的哪个？

在鸿蒙开发中，通过SwipeGesture判断滑动方向时，可以通过GestureEvent对象的滑动角度或速度向量属性实现。以下是具体方法和实现示例：

一、通过角度（angle）判断

GestureEvent中的angle属性表示滑动方向与X轴顺时针方向的夹角（单位：度），取值范围为[0,180]和(-180,0)。具体方向对应关系如下：

• 右滑：角度接近0°（范围：-45°~45°）
• 左滑：角度接近180°或-180°（范围：135°~180° 或 -180°~-135°）
• 下滑：角度接近90°（范围：45°~135°）
• 上滑：角度接近-90°（范围：-135°~-45°）

示例代码

.gesture(
  SwipeGesture({ direction: SwipeDirection.All })
    .onAction((event: GestureEvent) => {
      if (event.angle >= -45 && event.angle <= 45) {
        console.info("右滑");
      } else if (event.angle >= 135 || event.angle <= -135) {
        console.info("左滑");
      } else if (event.angle > 45 && event.angle < 135) {
        console.info("下滑");
      } else if (event.angle < -45 && event.angle > -135) {
        console.info("上滑");
      }
    })
)

二、通过速度向量（velocityX/velocityY）判断

若需要更精确判断水平或垂直滑动，可通过velocityX和velocityY的速度分量（单位：vp/s）：

• 水平方向：velocityX的正负值分别表示右滑（正）和左滑（负）。
• 垂直方向：velocityY的正负值分别表示下滑（正）和上滑（负）。

代码片段

if (Math.abs(event.velocityX) > Math.abs(event.velocityY)) {
  // 水平滑动为主
  if (event.velocityX > 0) {
    console.info("右滑");
  } else {
    console.info("左滑");
  }
} else {
  // 垂直滑动为主
  if (event.velocityY > 0) {
    console.info("下滑");
  } else {
    console.info("上滑");
  }
}

三、注意事项

1. 速度阈值：需确保滑动速度超过默认的100vp/s（或自定义的阈值）才能触发SwipeGesture1。
2. 方向过滤：若仅需监听特定方向，可在SwipeGesture初始化时通过direction参数限制（如SwipeDirection.Horizontal）。
3. 多指操作：若设置fingers参数为多指，需确保触点数量符合条件才会触发回调。

完整示例场景

// 监听多方向快滑手势并打印结果
@Entry
@Component
struct SwipeExample {
  build() {
    Column() {
      Text("快滑区域")
        .width(300)
        .height(200)
        .border({ width: 2 })
        .gesture(
          SwipeGesture({ direction: SwipeDirection.All })
            .onAction((event: GestureEvent) => {
              let direction = "";
              if (event.angle >= -45 && event.angle <= 45) direction = "右滑";
              else if (event.angle >= 135 || event.angle <= -135) direction = "左滑";
              else if (event.angle > 45 && event.angle < 135) direction = "下滑";
              else direction = "上滑";
              console.info(`滑动方向：${direction}，速度：${event.speed}vp/s`);
            })
        )
    }
  }
}

通过上述方法，可准确识别用户滑动方向并实现交互逻辑。

信息来源

SwipeGesture

在HarmonyOS Next中，使用SwipeGesture监听快滑手势时，其回调事件onAction的参数event（类型为GestureEvent）提供了直接获取滑动方向的方法。

核心方法是：event.offsetX 和 event.offsetY。

这两个属性分别代表了从手势触碰到离开，在X轴和Y轴上滑动的总偏移量。通过判断这两个值的正负和大小，即可精确判断滑动方向。

判断逻辑如下：

1. 获取偏移量：在onAction(event: GestureEvent) => void回调中，读取event.offsetX和event.offsetY。
2. 设定方向阈值：为避免轻微抖动被误判，可设定一个最小滑动距离阈值（例如5vp）。
3. 判断主方向：比较offsetX和offsetY的绝对值，绝对值更大的轴即为主滑动方向。
4. 确定具体方向：
   • 若offsetX的绝对值更大且offsetX > 0，则为向右滑动。
   • 若offsetX的绝对值更大且offsetX < 0，则为向左滑动。
   • 若offsetY的绝对值更大且offsetY > 0，则为向下滑动。
   • 若offsetY的绝对值更大且offsetY < 0，则为向上滑动。

示例代码片段：

@Entry
@Component
struct SwipeGestureExample {
  @State direction: string = '未滑动'

  build() {
    Column() {
      Text(this.direction)
        .fontSize(30)
        .margin(50)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    // 应用快滑手势识别
    .gesture(
      SwipeGesture({ speed: 100 })
        .onAction((event: GestureEvent) => {
          const minDistance = 5; // 设定阈值，单位vp
          let dx = event.offsetX;
          let dy = event.offsetY;

          // 判断滑动距离是否超过阈值
          if (Math.abs(dx) < minDistance && Math.abs(dy) < minDistance) {
            return; // 滑动距离过小，不处理
          }

          // 判断主方向
          if (Math.abs(dx) > Math.abs(dy)) {
            // 水平方向为主
            this.direction = dx > 0 ? '向右快滑' : '向左快滑';
          } else {
            // 垂直方向为主
            this.direction = dy > 0 ? '向下快滑' : '向上快滑';
          }
        })
    )
  }
}

简要说明：

• event.offsetX/Y是系统计算好的累积偏移量，直接使用即可，无需手动计算起点和终点。
• 通过比较两轴偏移量的绝对值，可以确保识别出用户意图中的主要滑动方向，避免斜向滑动产生歧义。
• 增加一个minDistance阈值是常见的最佳实践，可以提高交互的准确性。

因此，你不需要自行计算轨迹，直接利用GestureEvent对象中的偏移量属性进行判断即可。