單一手勢(shì)

TapGesture(value?:{count?:number; fingers?:number})

點(diǎn)擊手勢(shì)支持單次點(diǎn)擊和多次點(diǎn)擊，擁有兩個(gè)可選參數(shù)：

• count：非必填參數(shù)，聲明該點(diǎn)擊手勢(shì)識(shí)別的連續(xù)點(diǎn)擊次數(shù)。默認(rèn)值為1，若設(shè)置小于1的非法值會(huì)被轉(zhuǎn)化為默認(rèn)值。如果配置多次點(diǎn)擊，上一次抬起和下一次按下的超時(shí)時(shí)間為300毫秒。
• fingers：非必填參數(shù)，用于聲明觸發(fā)點(diǎn)擊的手指數(shù)量，最小值為1，最大值為10，默認(rèn)值為1。當(dāng)配置多指時(shí)，若第一根手指按下300毫秒內(nèi)未有足夠的手指數(shù)按下則手勢(shì)識(shí)別失敗。當(dāng)實(shí)際點(diǎn)擊手指數(shù)超過(guò)配置值時(shí)，手勢(shì)識(shí)別失敗。
  以在Text組件上綁定雙擊手勢(shì)（count值為2的點(diǎn)擊手勢(shì)）為例：

  // xxx.ets
  @Entry
  @Component
  struct Index {
    @State value: string = "";
    
    build() {
      Column() {
        Text('Click twice').fontSize(28)
          .gesture(
            // 綁定count為2的TapGesture
            TapGesture({ count: 2 })
              .onAction((event: GestureEvent) => {
                this.value = JSON.stringify(event.fingerList[0]);
              }))
        Text(this.value)
      }
      .height(200)
      .width(250)
      .padding(20)
      .border({ width: 3 })
      .margin(30)
    }
  }

  

LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})

長(zhǎng)按手勢(shì)用于觸發(fā)長(zhǎng)按手勢(shì)事件，觸發(fā)長(zhǎng)按手勢(shì)的最少手指數(shù)量為1，最短長(zhǎng)按事件為500毫秒，擁有三個(gè)可選參數(shù)：

• fingers：非必選參數(shù)，用于聲明觸發(fā)長(zhǎng)按手勢(shì)所需要的最少手指數(shù)量，最小值為1，最大值為10，默認(rèn)值為1。
• repeat：非必選參數(shù)，用于聲明是否連續(xù)觸發(fā)事件回調(diào)，默認(rèn)值為false。
• duration：非必選參數(shù)，用于聲明觸發(fā)長(zhǎng)按所需的最短時(shí)間，單位為毫秒，默認(rèn)值為500。

以在Text組件上綁定可以重復(fù)觸發(fā)的長(zhǎng)按手勢(shì)為例：

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

  build() {
    Column() {
      Text('LongPress OnAction:' + this.count).fontSize(28)
        .gesture(
          // 綁定可以重復(fù)觸發(fā)的LongPressGesture
          LongPressGesture({ repeat: true })
            .onAction((event: GestureEvent) => {
              if (event.repeat) {
                this.count++;
              }
            })
            .onActionEnd(() => {
              this.count = 0;
            })
        )
    }
    .height(200)
    .width(250)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

PanGesture(value?:{ fingers?:number; direction?:PanDirection; distance?:number})

拖動(dòng)手勢(shì)用于觸發(fā)拖動(dòng)手勢(shì)事件，滑動(dòng)達(dá)到最小滑動(dòng)距離（默認(rèn)值為5vp）時(shí)拖動(dòng)手勢(shì)識(shí)別成功，擁有三個(gè)可選參數(shù)：

• fingers：非必選參數(shù)，用于聲明觸發(fā)拖動(dòng)手勢(shì)所需要的最少手指數(shù)量，最小值為1，最大值為10，默認(rèn)值為1。
• direction：非必選參數(shù)，用于聲明觸發(fā)拖動(dòng)的手勢(shì)方向，此枚舉值支持邏輯與（&）和邏輯或（|）運(yùn)算。默認(rèn)值為Pandirection.All。
• distance：非必選參數(shù)，用于聲明觸發(fā)拖動(dòng)的最小拖動(dòng)識(shí)別距離，單位為vp，默認(rèn)值為5。

以在Text組件上綁定拖動(dòng)手勢(shì)為例，可以通過(guò)在拖動(dòng)手勢(shì)的回調(diào)函數(shù)中修改組件的布局位置信息來(lái)實(shí)現(xiàn)組件的拖動(dòng)：

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

  build() {
    Column() {
      Text('PanGesture Offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
        .height(200)
        .width(300)
        .padding(20)
        .border({ width: 3 })
          // 在組件上綁定布局位置信息
        .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
        .gesture(
          // 綁定拖動(dòng)手勢(shì)
          PanGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start');
            })
              // 當(dāng)觸發(fā)拖動(dòng)手勢(shì)時(shí)，根據(jù)回調(diào)函數(shù)修改組件的布局位置信息
            .onActionUpdate((event: GestureEvent) => {
              this.offsetX = this.positionX + event.offsetX;
              this.offsetY = this.positionY + event.offsetY;
            })
            .onActionEnd(() => {
              this.positionX = this.offsetX;
              this.positionY = this.offsetY;
            })
        )
    }
    .height(200)
    .width(250)
  }
}

PinchGesture(value?:{fingers?:number; distance?:number})

捏合手勢(shì)用于觸發(fā)捏合手勢(shì)事件，觸發(fā)捏合手勢(shì)的最少手指數(shù)量為2指，最大為5指，最小識(shí)別距離為5vp，擁有兩個(gè)可選參數(shù)：

• fingers：非必選參數(shù)，用于聲明觸發(fā)捏合手勢(shì)所需要的最少手指數(shù)量，最小值為2，最大值為5，默認(rèn)值為2。
• distance：非必選參數(shù)，用于聲明觸發(fā)捏合手勢(shì)的最小距離，單位為vp，默認(rèn)值為5。

以在Column組件上綁定三指捏合手勢(shì)為例，可以通過(guò)在捏合手勢(shì)的函數(shù)回調(diào)中獲取縮放比例，實(shí)現(xiàn)對(duì)組件的縮小或放大：

// xxx.ets
@Entry
@Component
struct Index {
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;

  build() {
    Column() {
      Column() {
        Text('PinchGesture scale:\n' + this.scaleValue)
        Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
      }
      .height(200)
      .width(300)
      .border({ width: 3 })
      .margin({ top: 100 })
      // 在組件上綁定縮放比例，可以通過(guò)修改縮放比例來(lái)實(shí)現(xiàn)組件的縮小或者放大
      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
      .gesture(
        // 在組件上綁定三指觸發(fā)的捏合手勢(shì)
        PinchGesture({ fingers: 3 })
          .onActionStart((event: GestureEvent) => {
            console.info('Pinch start');
          })
            // 當(dāng)捏合手勢(shì)觸發(fā)時(shí)，可以通過(guò)回調(diào)函數(shù)獲取縮放比例，從而修改組件的縮放比例
          .onActionUpdate((event: GestureEvent) => {
            this.scaleValue = this.pinchValue * event.scale;
            this.pinchX = event.pinchCenterX;
            this.pinchY = event.pinchCenterY;
          })
          .onActionEnd(() => {
            this.pinchValue = this.scaleValue;
            console.info('Pinch end');
          })
      )
    }
  }
}

RotationGesture(value?:{fingers?:number; angle?:number})

旋轉(zhuǎn)手勢(shì)用于觸發(fā)旋轉(zhuǎn)手勢(shì)事件，觸發(fā)旋轉(zhuǎn)手勢(shì)的最少手指數(shù)量為2指，最大為5指，最小改變度數(shù)為1度，擁有兩個(gè)可選參數(shù)：

• fingers：非必選參數(shù)，用于聲明觸發(fā)旋轉(zhuǎn)手勢(shì)所需要的最少手指數(shù)量，最小值為2，最大值為5，默認(rèn)值為2。
• angle：非必選參數(shù)，用于聲明觸發(fā)旋轉(zhuǎn)手勢(shì)的最小改變度數(shù)，單位為deg，默認(rèn)值為1。

以在Text組件上綁定旋轉(zhuǎn)手勢(shì)實(shí)現(xiàn)組件的旋轉(zhuǎn)為例，可以通過(guò)在旋轉(zhuǎn)手勢(shì)的回調(diào)函數(shù)中獲取旋轉(zhuǎn)角度，從而實(shí)現(xiàn)組件的旋轉(zhuǎn)：

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

  build() {
    Column() {
      Text('RotationGesture angle:' + this.angle).fontSize(28)
        // 在組件上綁定旋轉(zhuǎn)布局，可以通過(guò)修改旋轉(zhuǎn)角度來(lái)實(shí)現(xiàn)組件的旋轉(zhuǎn)
        .rotate({ angle: this.angle })
        .gesture(
          RotationGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('RotationGesture is onActionStart');
            })
              // 當(dāng)旋轉(zhuǎn)手勢(shì)生效時(shí)，通過(guò)旋轉(zhuǎn)手勢(shì)的回調(diào)函數(shù)獲取旋轉(zhuǎn)角度，從而修改組件的旋轉(zhuǎn)角度
            .onActionUpdate((event: GestureEvent) => {
              this.angle = this.rotateValue + event.angle;
              console.info('RotationGesture is onActionEnd');
            })
              // 當(dāng)旋轉(zhuǎn)結(jié)束抬手時(shí)，固定組件在旋轉(zhuǎn)結(jié)束時(shí)的角度
            .onActionEnd(() => {
              this.rotateValue = this.angle;
              console.info('RotationGesture is onActionEnd');
            })
            .onActionCancel(() => {
              console.info('RotationGesture is onActionCancel');
            })
        )
    }
    .height(200)
    .width(250)
  }
}

SwipeGesture(value?:{fingers?:number; direction?:SwipeDirection; speed?:number})

滑動(dòng)手勢(shì)用于觸發(fā)滑動(dòng)事件，當(dāng)滑動(dòng)速度大于100vp/s時(shí)可以識(shí)別成功，擁有三個(gè)可選參數(shù)：

• fingers：非必選參數(shù)，用于聲明觸發(fā)滑動(dòng)手勢(shì)所需要的最少手指數(shù)量，最小值為1，最大值為10，默認(rèn)值為1。
• direction：非必選參數(shù)，用于聲明觸發(fā)滑動(dòng)手勢(shì)的方向，此枚舉值支持邏輯與（&）和邏輯或（|）運(yùn)算。默認(rèn)值為SwipeDirection.All。
• speed：非必選參數(shù)，用于聲明觸發(fā)滑動(dòng)的最小滑動(dòng)識(shí)別速度，單位為vp/s，默認(rèn)值為100。

以在Column組件上綁定滑動(dòng)手勢(shì)實(shí)現(xiàn)組件的旋轉(zhuǎn)為例：

// xxx.ets
@Entry
@Component
struct Index {
  @State rotateAngle: number = 0;
  @State speed: number = 1;

  build() {
    Column() {
      Column() {
        Text("SwipeGesture speed\n" + this.speed)
        Text("SwipeGesture angle\n" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      // 在Column組件上綁定旋轉(zhuǎn)，通過(guò)滑動(dòng)手勢(shì)的滑動(dòng)速度和角度修改旋轉(zhuǎn)的角度
      .rotate({ angle: this.rotateAngle })
      .gesture(
        // 綁定滑動(dòng)手勢(shì)且限制僅在豎直方向滑動(dòng)時(shí)觸發(fā)
        SwipeGesture({ direction: SwipeDirection.Vertical })
          // 當(dāng)滑動(dòng)手勢(shì)觸發(fā)時(shí)，獲取滑動(dòng)的速度和角度，實(shí)現(xiàn)對(duì)組件的布局參數(shù)的修改
          .onAction((event: GestureEvent) => {
            this.speed = event.speed;
            this.rotateAngle = event.angle;
          })
      )
    }
  }
}