組合手勢

組合手勢由多種單一手勢組合而成，通過在GestureGroup中使用不同的GestureMode來聲明該組合手勢的類型，支持順序識別、并行識別和互斥識別三種類型。

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

• mode：必選參數(shù)，為GestureMode枚舉類。用于聲明該組合手勢的類型。
• gesture：必選參數(shù)，為由多個(gè)手勢組合而成的數(shù)組。用于聲明組合成該組合手勢的各個(gè)手勢。

// xxx.ets
@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State count: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State borderStyles: BorderStyle = BorderStyle.Solid

  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
    }
    // 綁定translate屬性可以實(shí)現(xiàn)組件的位置移動(dòng)
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下組合手勢為順序識別，當(dāng)長按手勢事件未正常觸發(fā)時(shí)不會(huì)觸發(fā)拖動(dòng)手勢事件
    .gesture(
      // 聲明該組合手勢的類型為Sequence類型
      GestureGroup(GestureMode.Sequence,
        // 該組合手勢第一個(gè)觸發(fā)的手勢為長按手勢，且長按手勢可多次響應(yīng)
        LongPressGesture({ repeat: true })
          // 當(dāng)長按手勢識別成功，增加Text組件上顯示的count次數(shù)
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              this.count++;
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 當(dāng)長按之后進(jìn)行拖動(dòng)，PanGesture手勢被觸發(fā)
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 當(dāng)該手勢被觸發(fā)時(shí)，根據(jù)回調(diào)獲得拖動(dòng)的距離，修改該組件的位移距離從而實(shí)現(xiàn)組件的移動(dòng)
          .onActionUpdate((event: GestureEvent) => {
            this.offsetX = this.positionX + event.offsetX;
            this.offsetY = this.positionY + event.offsetY;
            console.info('pan update');
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.borderStyles = BorderStyle.Solid;
          })
      )
    )
  }
}

// xxx.ets
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width(250)
    // 以下組合手勢為并行并別，單擊手勢識別成功后，若在規(guī)定時(shí)間內(nèi)再次點(diǎn)擊，雙擊手勢也會(huì)識別成功
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

// xxx.ets
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width(250)
    //以下組合手勢為互斥并別，單擊手勢識別成功后，雙擊手勢會(huì)識別失敗
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}