HarmonyOS 鸿蒙Next交互事件技术解析

1. 什么是交互事件？

交互事件是指用户通过设备（如手机、平板、智能手表等）与应用界面进行交互时触发的信号，是连接用户操作与应用响应的桥梁。如页面跳转、数据更新、动画效果等。

通用事件按照触发类型来分类，包括触屏事件、键鼠事件、焦点事件和拖拽事件。

. onClick：

在可响应拖出的组件上长按并滑动以触发拖拽行为，当用户释放手指或鼠标时，拖拽操作即告结束。

. onTouch：

当手指或手写笔在组件上触碰时，会触发不同动作所对应的事件响应，包括按下（Down）、滑动（Move）、抬起（Up）事件。

. onDragStart：

在可响应拖出的组件上长按并滑动以触发拖拽行为，当用户释放手指或鼠标时，拖拽操作即告结束。

. onDragMove：

当拖拽点在组件范围内移动时，如果该组件监听了onDrop事件，此回调将会被触发。

手势事件是由绑定手势方法和绑定的手势组成，绑定的手势可以分为单一手势和组合手势两种类型，根据手势的复杂程度进行区分。

. gesture：

通用的一种手势绑定方法，可以将手势绑定到对应的组件上。如点击手势TapGesture、LongPressGesture、PanGesture、PinchGesture、RotationGesture、SwipeGesture等。

. GestureGroup：

组合手势由多种单一手势组合而成，通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型，支持顺序识别、并行识别和互斥识别三种类型。

. priorityGesture：

是带优先级的手势绑定方法，可以在组件上绑定优先识别的手势。

. parallelGesture：

是并行的手势绑定方法，可以在父子组件上绑定可以同时响应的相同手势。

核心作用：

当用户进行点击按钮、滑动屏幕、输入文字、长按控件等操作时，系统会捕获这些动作并生成对应的事件，应用通过监听和处理这些事件，实现相应的功能反馈。通过给各个组件绑定不同的手势事件，并设计事件的响应方式，当手势识别成功时，ArkUI框架将通过事件回调通知组件手势识别的结果。

2. 交互事件技术的优势

3. 如何实现拖动长按顺序手势交互？

步骤1：将组合手势绑定到组件

Column() {
  Text('组合手势')
    .fontSize(15)
}
.gesture(
  // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
)
.onCancel(() => {
  console.info('sequence gesture canceled')
})

关键属性：

• gesture：设置一个或者多个基础手势类型时，这些手势会被识别为组合手势。若此参数不填则组合手势识别功能不生效。
• onCancel：组合手势取消后触发回调，用于执行资源释放、状态重置等操作。

步骤2：设置一个或多个手势类型（GestureGroup）

GestureGroup(GestureMode.Sequence,
  // 绑定gesture单手势多组合手势
)

关键参数：

• GestureGroup：接口接收GestureMode作为参数，用于设置组合手势识别模式；

• GestureType：设置手势类型，如支持滑动手势事件事件的识别和长按手势等。

• GestureMode：设置组合手势识别模式，默认值是GestureMode.Sequence。Parallel表示并发识别注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。Exclusive表示互斥识别注册的手势同时识别，若有一个手势识别成功，则结束手势识别。

步骤3：事件及事件对象（event）

继承于BaseEvent，其中target属性表示触发手势事件的元素对象；

LongPressGesture({ repeat: true })
  .onAction((event?: GestureEvent) => {
    if (event && event.repeat) {
      // ...
    }
    console.info('长按')
  }),
PanGesture()
  .onActionStart(() => {
    console.info('pan start')
  })
  .onActionUpdate((event?: GestureEvent) => {
    console.info('pan update')
  })
  .onActionEnd(() => {
    console.info('pan end')
  })

关键参数：

• LongPressGesture：用于触发长按手势事件，触发长按手势的最少手指数为1，最短长按时间为500毫秒。
• PanGesture：滑动手势事件，当滑动的最小距离达到设定的最小值时触发滑动手势事件。
• event：获取事件对象信息，source用于获取事件输入设备的类型，还包括pressure、offsetX、offsetY等常用属性。

4. 手势事件冲突问题总结

关键点

核心价值：

通过干预手势处理可有效解决冲突，除控制组件响应热区和命中测试模式外，还可以通过自定义手势判定、手势并行动态控制、阻止手势参与识别，解决手势事件冲突问题。

适用场景：

同一组件上的多手势，父子组件的同类型手势识别器，系统默认手势与自定义手势冲突等。

最佳实践：

1. 图片查看器轮播与滑动手势事件冲突实践；
2. scroll滑动手势与子组件点击手势冲突。

示例场景：

图片缩放后左右滑动预览：用Swiper组件的disableSwipe属性，进行动态赋值，在图片保持默认尺寸或图片在放大状态下已触及边界时，将disableSwipe属性设置为true，从而使得Swiper能够切换图片；当图片处于放大状态且尚未到达边界时，则将disableSwipe属性设为false，此时Swiper的切换功能将被禁用。