?一、單一手勢

應(yīng)用程序的手勢操作是指在移動(dòng)設(shè)備上使用手指或手勢進(jìn)行與應(yīng)用程序交互的方式。手勢操作可以包括點(diǎn)擊、滑動(dòng)、雙擊、捏合等動(dòng)作，用于實(shí)現(xiàn)不同的功能和操作。

HarmonyOS中常見的手勢操作及其功能：

?1.點(diǎn)擊手勢（TapGesture）

點(diǎn)擊手勢（TapGesture）是指用戶在觸摸屏幕上進(jìn)行點(diǎn)擊操作時(shí)的手勢，通常是快速點(diǎn)擊屏幕一次。點(diǎn)擊手勢是HarmonyOS開發(fā)中常用的手勢識別方法之一，用于識別用戶的點(diǎn)擊行為并進(jìn)行相應(yīng)的處理。

通過點(diǎn)擊手勢，我們可以實(shí)現(xiàn)一些常見的交互效果，比如按鈕點(diǎn)擊、視圖切換、彈出菜單等。當(dāng)用戶點(diǎn)擊屏幕時(shí)，系統(tǒng)會(huì)將該操作識別為點(diǎn)擊手勢，并通知應(yīng)用程序進(jìn)行相應(yīng)的處理。

接口說明：

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

案例：

// xxx.ets
@Entry
@Component
struct Index {
  @State value: string = "";

  build() {
    Column() {
      Text('Click twice').fontSize(28)
        .gesture(
          // 綁定count為2的TapGesture,相當(dāng)于雙擊
          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)
  }
}

?2.長按手勢（LongPressGesture）

長按手勢（LongPressGesture）是指用戶在屏幕上長時(shí)間按住一個(gè)元素或者某個(gè)區(qū)域，觸發(fā)的手勢操作。長按手勢通常用于實(shí)現(xiàn)某些特定的功能，比如彈出菜單、編輯文本、刪除元素等。長按手勢的觸發(fā)時(shí)間通常比較長，根據(jù)不同的應(yīng)用場景，可以設(shè)置觸發(fā)長按手勢所需的最小按住時(shí)間。

在移動(dòng)設(shè)備上，長按手勢通常包括以下幾個(gè)階段：

1. 按下（Touch Down）：用戶按住屏幕上一個(gè)元素或者某個(gè)區(qū)域。
2. 按住（Touch Hold）：用戶持續(xù)按住屏幕，一般在這個(gè)階段內(nèi)可以實(shí)現(xiàn)一些操作，比如拖動(dòng)元素、改變元素的位置等。
3. 觸發(fā)（Touch Up Inside）：用戶松開手指，如果在按住階段內(nèi)達(dá)到某個(gè)條件，則會(huì)觸發(fā)相應(yīng)的操作，比如彈出菜單。

長按手勢可以提供更多的交互方式和功能，使用戶能夠更方便地操作應(yīng)用程序，提升用戶體驗(yàn)。在移動(dòng)應(yīng)用開發(fā)中，可以使用相應(yīng)的手勢識別庫或者框架來實(shí)現(xiàn)長按手勢的監(jiān)聽和處理。

接口說明：

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

案例：

// 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)
  }
}

?3.拖動(dòng)手勢（PanGesture）

拖動(dòng)手勢（PanGesture）是一種用于在移動(dòng)設(shè)備上識別用戶手指拖動(dòng)操作的手勢。通過拖動(dòng)手勢，用戶可以在屏幕上拖動(dòng)某個(gè)對象，例如移動(dòng)一個(gè)圖像、滾動(dòng)一個(gè)列表或調(diào)整一個(gè)視圖的位置。

拖動(dòng)手勢通常包括以下幾個(gè)基本元素：

• 起始點(diǎn)（起始位置）：用戶觸摸屏幕的初始位置。
• 移動(dòng)點(diǎn)（當(dāng)前位置）：用戶在屏幕上滑動(dòng)手指時(shí)的當(dāng)前位置。
• 移動(dòng)向量：起始點(diǎn)和移動(dòng)點(diǎn)之間的向量，表示手指移動(dòng)的方向和距離。

拖動(dòng)手勢可以用于許多應(yīng)用場景，例如：

• 拖動(dòng)和移動(dòng)元素：用戶可以在屏幕上拖動(dòng)圖像、視圖或其他元素，以實(shí)現(xiàn)移動(dòng)、重新排列或調(diào)整它們的位置。
• 滾動(dòng)視圖內(nèi)容：用戶可以在滾動(dòng)視圖中使用拖動(dòng)手勢來滾動(dòng)內(nèi)容，以瀏覽長列表或視圖。
• 雙指拖動(dòng)：有些應(yīng)用程序支持雙指拖動(dòng)手勢，通過同時(shí)滑動(dòng)兩個(gè)手指來實(shí)現(xiàn)某些特殊操作，例如旋轉(zhuǎn)或縮放圖像。

在移動(dòng)設(shè)備的開發(fā)中，開發(fā)人員可以使用各種框架和技術(shù)，來實(shí)現(xiàn)拖動(dòng)手勢的識別和處理。通過捕捉拖動(dòng)手勢并處理它們，開發(fā)人員可以為用戶提供更流暢、直觀的界面交互體驗(yàn)。

接口說明：

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

案例：

// 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)手勢
          PanGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start');
            })
              // 當(dāng)觸發(fā)拖動(dòng)手勢時(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)
  }
}

?4.捏合手勢（PinchGesture）

捏合手勢（PinchGesture）是一種手勢操作，通常在觸摸屏上使用。它涉及使用兩個(gè)或更多的手指同時(shí)向內(nèi)或向外移動(dòng)，以縮小或放大屏幕上的內(nèi)容。當(dāng)手指向內(nèi)移動(dòng)時(shí)，被捏合的物體（如圖片、網(wǎng)頁等）將會(huì)被縮��；當(dāng)手指向外移動(dòng)時(shí)，被捏合的物體將會(huì)被放大。

捏合手勢在現(xiàn)代移動(dòng)設(shè)備中廣泛應(yīng)用，例如在智能手機(jī)和平板電腦上瀏覽照片、地圖、網(wǎng)頁等時(shí)經(jīng)常使用捏合手勢來實(shí)現(xiàn)縮放功能。此外，捏合手勢也可以用于一些操作，例如在編輯應(yīng)用程序中調(diào)整對象大小或在游戲中控制角色的動(dòng)作。

接口說明：

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

案例：

// 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 })
      // 在組件上綁定縮放比例，可以通過修改縮放比例來實(shí)現(xiàn)組件的縮小或者放大
      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
      .gesture(
        // 在組件上綁定三指觸發(fā)的捏合手勢
        PinchGesture({ fingers: 3 })
          .onActionStart((event: GestureEvent) => {
            console.info('Pinch start');
          })
            // 當(dāng)捏合手勢觸發(fā)時(shí)，可以通過回調(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');
          })
      )
    }
  }
}

?5.旋轉(zhuǎn)手勢（RotationGesture）

旋轉(zhuǎn)手勢（Rotation Gesture）是一種常見的手勢識別方式，用于識別用戶在觸摸屏上進(jìn)行旋轉(zhuǎn)操作的手勢。在移動(dòng)設(shè)備上，旋轉(zhuǎn)手勢通常使用兩個(gè)手指來執(zhí)行旋轉(zhuǎn)操作。

在旋轉(zhuǎn)手勢中，用戶可以用兩個(gè)手指按住屏幕上的對象，并圍繞一個(gè)旋轉(zhuǎn)中心點(diǎn)進(jìn)行旋轉(zhuǎn)動(dòng)作。該手勢可以用于各種應(yīng)用場景，例如在地圖應(yīng)用中旋轉(zhuǎn)地圖方向，或在圖片編輯應(yīng)用中旋轉(zhuǎn)圖像。

當(dāng)用戶進(jìn)行旋轉(zhuǎn)手勢時(shí)，系統(tǒng)會(huì)根據(jù)手指的移動(dòng)軌跡和角度變化來計(jì)算旋轉(zhuǎn)角度，并將其作為旋轉(zhuǎn)手勢的輸入。開發(fā)者可以通過手勢識別庫或框架來監(jiān)聽和處理旋轉(zhuǎn)手勢，以實(shí)現(xiàn)相應(yīng)的功能。

接口說明：

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

案例：

// 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)布局，可以通過修改旋轉(zhuǎn)角度來實(shí)現(xiàn)組件的旋轉(zhuǎn)
        .rotate({ angle: this.angle })
        .gesture(
          RotationGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('RotationGesture is onActionStart');
            })
              // 當(dāng)旋轉(zhuǎn)手勢生效時(shí)，通過旋轉(zhuǎn)手勢的回調(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)
  }
}

?6.滑動(dòng)手勢（SwipeGesture）

滑動(dòng)手勢（SwipeGesture）是一種用戶界面交互行為，通過在觸摸屏上進(jìn)行手指滑動(dòng)操作來執(zhí)行特定的動(dòng)作或觸發(fā)特定的事件�；瑒�(dòng)手勢通常用于移動(dòng)應(yīng)用程序中的頁面導(dǎo)航、圖片瀏覽、刪除操作等場景。

滑動(dòng)手勢可以分為不同的方向，常見的包括向上滑動(dòng)、向下滑動(dòng)、向左滑動(dòng)和向右滑動(dòng)。用戶可以在屏幕上滑動(dòng)手指，當(dāng)手指的移動(dòng)方向和距離達(dá)到一定的條件時(shí)，系統(tǒng)會(huì)識別為滑動(dòng)手勢，并根據(jù)具體需求執(zhí)行相應(yīng)的操作。

滑動(dòng)手勢通常使用在移動(dòng)設(shè)備或觸摸屏設(shè)備上，通過手指的滑動(dòng)來完成操作，比如在手機(jī)上可以通過向左滑動(dòng)刪除一條消息，在圖片瀏覽應(yīng)用中可以通過向左滑動(dòng)切換到下一張圖片等�；瑒�(dòng)手勢的使用可以提高用戶體驗(yàn)，使用戶能夠更自然、直觀地與應(yīng)用程序進(jìn)行交互。

接口說明：

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

案例：

// 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)，通過滑動(dòng)手勢的滑動(dòng)速度和角度修改旋轉(zhuǎn)的角度
      .rotate({ angle: this.rotateAngle })
      .gesture(
        // 綁定滑動(dòng)手勢且限制僅在豎直方向滑動(dòng)時(shí)觸發(fā)
        SwipeGesture({ direction: SwipeDirection.Vertical })
          // 當(dāng)滑動(dòng)手勢觸發(fā)時(shí)，獲取滑動(dòng)的速度和角度，實(shí)現(xiàn)對組件的布局參數(shù)的修改
          .onAction((event: GestureEvent) => {
            this.speed = event.speed;
            this.rotateAngle = event.angle;
          })
      )
    }
  }
}

?寫在最后

• 如果你覺得這篇內(nèi)容對你還蠻有幫助，我想邀請你幫我三個(gè)小忙：
• 點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評論』，才是我創(chuàng)造的動(dòng)力。
• 關(guān)注小編，同時(shí)可以期待后續(xù)文章ing?，不定期分享原創(chuàng)知識。
• 更多鴻蒙最新技術(shù)知識點(diǎn)，請關(guān)注作者博客： https://t.doruo.cn/14DjR1rEY