Binding gesture method

Gesture Binding Methods in ArkUI

Gesture Binding Methods

gesture (General Gesture Binding Method)

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

• Description: The gesture method is a general way to bind gestures to components.
• Example: Binding a TapGesture to a Text component using the gesture method.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        // Binding TapGesture to Text component using gesture method
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
  }
}

priorityGesture (Priority Gesture Binding Method)

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

• Description: The priorityGesture method binds gestures with priority to components.
• Behavior: By default, when both parent and child components bind the same type of gesture using gesture, the child component's gesture takes precedence. When the parent component binds the same type of gesture using priorityGesture, the parent component's gesture takes precedence.
• Long Press Gesture: The component with the shorter minimum duration for long press will take precedence, ignoring priorityGesture settings.
• Example: When both Column and Text components bind TapGesture, the parent Column component's TapGesture takes precedence when bound with priorityGesture.

// 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)
    // Setting to priorityGesture, clicking on the text area will ignore the TapGesture event of the Text component and prioritize the TapGesture event of the parent Column component
    .priorityGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

parallelGesture (Parallel Gesture Binding Method)

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

• Description: The parallelGesture method allows binding gestures that can be simultaneously recognized by both parent and child components.
• Behavior: By default, gesture events are non-bubbling. When both parent and child components bind the same gesture, they compete for recognition, and at most, only one component's gesture event can be triggered. When the parent component binds a gesture using parallelGesture, both parent and child components' gesture events can be triggered, achieving a similar effect to bubbling.
• Example: Both Column and Text components' TapGesture events are triggered when clicking on the text area.

// 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)
    // Setting to parallelGesture, clicking on the text area will trigger both the parent Column and child Text components' TapGesture events
    .parallelGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.Normal)
  }
}