HarmonyOS/OpenHarmony (Stage model) application development gesture binding method

By binding different gesture events to each component and designing the response method of the event, when the gesture recognition is successful, the ArkUI framework will notify the component of the result of gesture recognition through event callbacks.
1. gesture (conventional gesture binding method)

..gesture(gesture: GestureType, mask?: GestureMask)

gesture is a universal gesture binding method that can bind gestures to corresponding components.
For example, you can bind the tap gesture TapGesture to the Text component through the gesture gesture binding method.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        // 采用gesture手势绑定方法绑定TapGesture
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
  }
}

2. priorityGesture (gesture binding method with priority)

undefined..priorityGesture(gesture: GestureType, mask?: GestureMask)。

priorityGesture is a priority gesture binding method that can bind priority recognition gestures to components.
By default, when a parent component and a child component use gesture to bind the same type of gesture, the child component gives priority to recognizing the gesture bound through gesture. When the parent component uses priorityGesture to bind gestures of the same type as the child component, the parent component gives priority to recognizing gestures bound through priorityGesture.
For example, when the parent component Column and the child component Text are bound to the TapGesture gesture at the same time, and the parent component is bound in the form of a priority gesture priorityGesture, the TapGesture bound to the parent component will be responded to first.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 设置为priorityGesture时，点击文本区域会忽略Text组件的TapGesture手势事件，优先响应父组件Column的TapGesture手势事件
    .priorityGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

3. parallelGesture (parallel gesture binding method)
...parallelGesture(gesture: GestureType, mask?: GestureMask)
parallelGesture is a parallel gesture binding method that can bind the same gesture that can respond simultaneously to parent and child components.
By default, gesture events are non-bubbling events. When the same gesture is bound to a parent-child component, the gesture events bound to the parent-child component will compete. At most, only one component's gesture event can receive a response. When the parent component is bound to the parallel gesture parallelGesture, the same gesture events of the parent and child components can be triggered, achieving a similar bubbling effect.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 设置为parallelGesture时，点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件
    .parallelGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

Note: When the parent component and the child component are bound to the click gesture event and the double-click gesture event at the same time, the parent component and the child component will only respond to the click gesture event.