鸿蒙中 GestureGroup组合手势
摘要:HarmonyOS ArkTS开发中,GestureGroup支持三种组合手势识别模式:1)顺序识别(Sequence)要求手势依次成功;2)并行识别(Parallel)允许手势同时独立触发;3)互斥识别(Exclusive)仅一个手势能成功。不同模式适用于拖拽操作、多手势并发或单选场景。通过onGestureRecognizerJudgeBegin可解决父子组件手势冲突,动态控制手势接收。
本文同步发表于 微信公众号,微信搜索 程语新视界 即可关注,每个工作日都有文章更新
组合手势是由多个单一手势组合而成的手势识别机制。在 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动态控制手势竞争行为
更多推荐



所有评论(0)