本文同步发表于 微信公众号,微信搜索 程语新视界 即可关注,每个工作日都有文章更新

   组合手势是由多个单一手势组合而成的手势识别机制。在 HarmonyOS ArkTS 开发中,可以使用 GestureGroup 来定义组合手势,并通过 GestureMode 指定其识别模式,支持以下三种类型:

  • 顺序识别(Sequence)

  • 并行识别(Parallel)

  • 互斥识别(Exclusive)

GestureGroup 构造函数

GestureGroup(mode: GestureMode, gesture: GestureType[])
  • mode:指定组合手势的类型(GestureMode 枚举值)

  • gesture:手势数组,包含组成该组合手势的各个单一手势

二、顺序识别(Sequence)

特点:

  • 手势按注册顺序依次识别

  • 必须前一个手势识别成功后,才能识别下一个

  • 一旦某个手势识别失败,后续手势均失败

  • 只有最后一个手势能响应 onActionEnd

示例:长按和拖拽事件

  • 由 LongPressGesture 和 PanGesture 组合

  • 必须先长按成功,才能触发滑动

  • 长按未达时间或未滑动,整个手势失败

代码:

.gesture(
  GestureGroup(GestureMode.Sequence,
    LongPressGesture({ repeat: true })
      .onAction((event) => { /* 更新计数 */ }),
    PanGesture()
      .onActionUpdate((event) => { /* 更新偏移量 */ })
  )
)

三、并行识别(Parallel)

特点:

  • 所有手势同时开始识别,互不干扰

  • 每个手势独立判断是否成功

  • 适合需要同时响应多个手势的场景

示例:单击与双击并行

  • 单击手势(TapGesture({ count: 1 }))和双击手势(TapGesture({ count: 2 }))同时识别。

  • 单次点击:单击成功,双击失败

  • 快速双击(间隔 ≤ 300ms):触发两次单击和一次双击

  • 慢速双击(间隔 > 300ms):只触发两次单击

代码:

.gesture(
  GestureGroup(GestureMode.Parallel,
    TapGesture({ count: 1 }).onAction(() => { /* 单击计数 */ }),
    TapGesture({ count: 2 }).onAction(() => { /* 双击计数 */ })
  )
)

四、互斥识别(Exclusive)

特点:

  • 所有手势同时识别,一旦某个手势识别成功,其余手势立即失败

  • 识别顺序取决于手势注册顺序

示例:单击与双击互斥

  • 若先注册单击后注册双击:

    • 第一次点击即触发单击,双击失败

    • 即使快速第二次点击,仍触发第二次单击,不会触发双击

  • 若先注册双击后注册单击:

    • 快速双击会触发双击,单击不触发

代码:

.gesture(
  GestureGroup(GestureMode.Exclusive,
    TapGesture({ count: 1 }).onAction(() => { /* 单击计数 */ }),
    TapGesture({ count: 2 }).onAction(() => { /* 双击计数 */ })
  )
)

五、示例:父组件与子组件手势竞争控制

  • 子组件绑定 LongPressGesture 和 PanGesture(并行)

  • 父组件为 Swiper,自带滑动手势

  • 需求:长按未成功时,子组件的滑动手势应被拒绝,让父组件的滑动手势生效

实现方式:

  • 使用 onGestureRecognizerJudgeBegin 动态判断是否接收滑动手势

  • 若长按未成功(isLongPress 为 false),则返回 GestureJudgeResult.REJECT,拒绝子组件滑动手势

核心代码:

.onGestureRecognizerJudgeBegin((event, current, others) => {
  if (current.getType() !== GestureControl.GestureType.PAN_GESTURE) {
    return GestureJudgeResult.CONTINUE;
  }
  if (this.isLongPress) {
    return GestureJudgeResult.CONTINUE;
  }
  return GestureJudgeResult.REJECT;
})

六、总结

识别模式 识别顺序 手势关系 适用场景
顺序识别 依次识别 前一个成功才能继续 拖拽、多步骤操作
并行识别 同时识别 互不影响 同时支持单击和双击
互斥识别 同时识别 一个成功则其余失败 单击或双击二选一

说明

  • 顺序识别中,只有最后一个手势有 onActionEnd

  • 并行识别中,所有手势独立响应事件

  • 互斥识别中,手势注册顺序直接影响最终触发的手势

  • 可通过 onGestureRecognizerJudgeBegin 动态控制手势竞争行为

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐