組合手勢(shì)

組合手勢(shì)由多種單一手勢(shì)組合而成，通過(guò)在GestureGroup中使用不同的GestureMode來(lái)聲明該組合手勢(shì)的類(lèi)型，支持順序識(shí)別、并行識(shí)別和互斥識(shí)別三種類(lèi)型。

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

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

// 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)
    //以下組合手勢(shì)為順序識(shí)別，當(dāng)長(zhǎng)按手勢(shì)事件未正常觸發(fā)時(shí)不會(huì)觸發(fā)拖動(dòng)手勢(shì)事件
    .gesture(
      // 聲明該組合手勢(shì)的類(lèi)型為Sequence類(lèi)型
      GestureGroup(GestureMode.Sequence,
        // 該組合手勢(shì)第一個(gè)觸發(fā)的手勢(shì)為長(zhǎng)按手勢(shì)，且長(zhǎng)按手勢(shì)可多次響應(yīng)
        LongPressGesture({ repeat: true })
          // 當(dāng)長(zhǎng)按手勢(shì)識(shí)別成功，增加Text組件上顯示的count次數(shù)
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              this.count++;
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 當(dāng)長(zhǎng)按之后進(jìn)行拖動(dòng)，PanGesture手勢(shì)被觸發(fā)
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 當(dāng)該手勢(shì)被觸發(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)
    // 以下組合手勢(shì)為并行并別，單擊手勢(shì)識(shí)別成功后，若在規(guī)定時(shí)間內(nèi)再次點(diǎn)擊，雙擊手勢(shì)也會(huì)識(shí)別成功
    .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)
    //以下組合手勢(shì)為互斥并別，單擊手勢(shì)識(shí)別成功后，雙擊手勢(shì)會(huì)識(shí)別失敗
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}