1. Sequantial Recognition

Sequential cmopound gestures require gestures to trigger in a specific order; subsequent gestures activate only after the previous one completes successfully.

// xxx.ets
@Entry
@Component
struct MyGestureDemo {
  @State moveX: number = 0;
  @State moveY: number = 0;
  @State pressCount: number = 0;
  @State lastX: number = 0;
  @State lastY: number = 0;
  @State borderStyle: BorderStyle = BorderStyle.Solid

  build() {
    Column() {
      Text(`Sequential Gesture\nLong Press Count: ${this.pressCount}\nPan Offset:\nX: ${this.moveX}\nY: ${this.moveY}`)
        .fontSize(28)
    }
    .translate({ x: this.moveX, y: this.moveY, z: 0 })
    .height(250)
    .width(300)
    .gesture(
      GestureGroup(GestureMode.Sequence,
        LongPressGesture({ repeat: true })
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              this.pressCount++;
            }
            console.info('LongPress activated');
          })
          .onActionEnd(() => {
            console.info('LongPress ended');
          }),
        PanGesture()
          .onActionStart(() => {
            this.borderStyle = BorderStyle.Dashed;
            console.info('Pan started');
          })
          .onActionUpdate((event: GestureEvent) => {
            this.moveX = this.lastX + event.offsetX;
            this.moveY = this.lastY + event.offsetY;
            console.info('Pan updated');
          })
          .onActionEnd(() => {
            this.lastX = this.moveX;
            this.lastY = this.moveY;
            this.borderStyle = BorderStyle.Solid;
          })
      )
    )
  }
}

2. Parallel Recognition

Parallel compound gestures detect and activate multiple gestures simultaneously. This allows overlapping interactions for a more flexible user experience.

// xxx.ets
@Entry
@Component
struct ParallelGestureDemo {
  @State singleTapCount: number = 0;
  @State doubleTapCount: number = 0;

  build() {
    Column() {
      Text(`Parallel Gesture\nSingle Tap Count: ${this.singleTapCount}\nDouble Tap Count: ${this.doubleTapCount}`)
        .fontSize(28)
    }
    .height(200)
    .width(250)
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.singleTapCount++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.doubleTapCount++;
          })
      )
    )
  }
}

3. Exclusive Recongition

Exclusive compound gestures allow only one gesture to activate from a group of conflicting gestures. The system selects the first valid gesture and ignores others.

// xxx.ets
@Entry
@Component
struct ExclusiveGestureDemo {
  @State singleHitCount: number = 0;
  @State doubleHitCount: number = 0;

  build() {
    Column() {
      Text(`Exclusive Gesture\nSingle Tap Count: ${this.singleHitCount}\nDouble Tap Count: ${this.doubleHitCount}`)
        .fontSize(28)
    }
    .height(200)
    .width(250)
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.singleHitCount++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.doubleHitCount++;
          })
      )
    )
  }
}