Combined gestures integrate multiple simple gestures to enable complex interactions. These enhance user interface flexibility and efficiency by supporting advanced operations like synchronized scaling, rotation, and navigation.

GestureGroup(mode:GestureMode, ...gesture:GestureType[])

1. Sequential Recognition

Identifies gestures performed in specific order. Requires precise sequence execution too trigger actions.

@Entry
@Component
struct GestureExample {
  @State moveX: number = 0;
  @State moveY: number = 0;
  @State pressCount: number = 0;
  @State originX: number = 0;
  @State originY: number = 0;

  build() {
    Column() {
      Text(`Sequential gestures\nLongPress count: ${this.pressCount}\nOffset X: ${this.moveX}\nOffset Y: ${this.moveY}`)
        .fontSize(28)
    }
    .translate({ x: this.moveX, y: this.moveY })
    .gesture(
      GestureGroup(GestureMode.Sequence,
        LongPressGesture({ repeat: true })
          .onAction((e: GestureEvent) => {
            if (e.repeat) this.pressCount++;
          }),
        PanGesture()
          .onActionUpdate((e: GestureEvent) => {
            this.moveX = this.originX + e.offsetX;
            this.moveY = this.originY + e.offsetY;
          })
          .onActionEnd(() => {
            this.originX = this.moveX;
            this.originY = this.moveY;
          })
      )
    )
  }
}

2. Parallel Recognition

Simultaneously detects multiple gestures. Enables concurrent interaction patterns.

@Entry
@Component
struct ParallelExample {
  @State singleTaps: number = 0;
  @State doubleTaps: number = 0;

  build() {
    Column() {
      Text(`Parallel gestures\nSingle taps: ${this.singleTaps}\nDouble taps: ${this.doubleTaps}`)
        .fontSize(28)
    }
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => this.singleTaps++),
        TapGesture({ count: 2 })
          .onAction(() => this.doubleTaps++)
      )
    )
  }
}

3. Exclusive Recognition

Processes conflicting gestures by prioritizing one action. Prevents ambiguous interaction outcomes.

@Entry
@Component
struct ExclusiveExample {
  @State tapCount: number = 0;
  @State longPressCount: number = 0;

  build() {
    Column() {
      Text(`Exclusive gestures\nTaps: ${this.tapCount}\nLong presses: ${this.longPressCount}`)
        .fontSize(28)
    }
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture()
          .onAction(() => this.tapCount++),
        LongPressGesture()
          .onAction(() => this.longPressCount++)
      )
    )
  }
}