在鸿蒙开发中，如何区分左右滑动手势？

Question

我在做一个左右切换的组件，使用的是 SwipeGesture，现在滑动已经可以触发事件了，但我怎么判断是往左滑还是往右滑？event里面有这个方向的信息吗？

Answer 1

据我所知，SwipeGesture 的 GestureEvent 对象中包含 angle 和 speed 字段。你可以通过 angle 判断滑动方向：

angle 约为 0°：向右
angle 约为 180° 或 -180°：向左

参考代码如下：

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

这种方式对于横向滑动识别比较可靠，也可以结合速度值 event.speed 做补充判断。

Answer 2

在鸿蒙开发中，使用SwipeGesture区分左右滑动方向，可通过事件参数中的速度向量判断。以下是具体实现方法：
一、关键 API 分析
SwipeGesture触发时，回调事件对象（如onAction的参数）包含以下关键属性：
velocityX：水平方向滑动速度（向右为正，向左为负）。
velocityY：垂直方向滑动速度（向下为正，向上为负）。
二、实现方案
通过判断velocityX的正负值区分左右滑动，同时可结合velocityY过滤垂直滑动干扰：
typescript
import { SwipeGesture, GestureDirection } from '@ohos.multimodalinput';

@Entry
@Component
struct SwipeComponent {
build() {

Column() {
  Text('左右滑动测试')
    .width('100%')
    .height(200)
    .backgroundColor('#f0f0f0')
    .gesture(
      // 创建SwipeGesture，设置支持所有方向
      SwipeGesture({
        fingers: 1,                  // 单指滑动
        direction: GestureDirection.ALL // 支持所有方向
      })
      .onAction((event) => {
        // 判断滑动方向
        this.handleSwipeDirection(event);
      })
    )
}
.width('100%')

}

private handleSwipeDirection(event: SwipeEvent) {

const { velocityX, velocityY } = event;

// 计算速度向量的角度（可选，用于更精确的方向判断）
const angle = Math.atan2(velocityY, velocityX) * 180 / Math.PI;

// 判断是水平滑动还是垂直滑动（阈值可调整）
if (Math.abs(velocityX) > Math.abs(velocityY) * 1.5) {
  // 水平滑动
  if (velocityX > 0) {
    console.info('向右滑动');
    this.onSwipeRight();
  } else {
    console.info('向左滑动');
    this.onSwipeLeft();
  }
} else {
  // 垂直滑动
  console.info('垂直滑动，忽略');
}

}

// 自定义左右滑动的业务逻辑
private onSwipeLeft() {

// 向左滑动的处理（如切换到上一页）

}

private onSwipeRight() {

// 向右滑动的处理（如切换到下一页）

}
}
三、优化建议
灵敏度调整：
可通过minVelocity参数设置最小触发速度（如minVelocity: 500），过滤轻微滑动。
方向精度提升：
直接使用velocityX的正负值判断方向（简单高效）。
若需更精确的角度判断（如区分斜向滑动），可计算atan2(velocityY, velocityX)的角度值：
typescript
// 角度范围：-180° ~ 180°
// 向右：约-45° ~ 45°
// 向左：约135° ~ 180° 或 -180° ~ -135°
if (angle > -45 && angle <= 45) {
console.info('向右滑动');
} else if (angle > 135 || angle <= -135) {
console.info('向左滑动');
}

防抖处理：
为避免频繁触发，可添加防抖逻辑：
typescript
private lastSwipeTime = 0;

private handleSwipeDirection(event: SwipeEvent) {
const now = Date.now();
if (now - this.lastSwipeTime < 300) return; // 300ms内不重复触发
this.lastSwipeTime = now;

// 方向判断逻辑...
}

四、注意事项
API 版本：SwipeGesture在鸿蒙 3.0 + 版本可用，低版本需使用PanGesture手动实现滑动检测。
冲突处理：若同时使用SwipeGesture和其他手势（如PinchGesture），建议通过GestureGroup组合管理。
通过以上方法，可精确区分左右滑动手势，实现流畅的页面切换效果。