鴻蒙HarmonyOS實戰-ArkUI事件（單一手勢）

蜀道山QAQ發表於2024-05-09
鴻蒙UI事件

🚀一、單一手勢

應用程式的手勢操作是指在移動裝置上使用手指或手勢進行與應用程式互動的方式。手勢操作可以包括點選、滑動、雙擊、捏合等動作，用於實現不同的功能和操作。

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

image

🔎1.點選手勢（TapGesture）

點選手勢（TapGesture）是指使用者在觸控螢幕上進行點選操作時的手勢，通常是快速點選螢幕一次。點選手勢是HarmonyOS開發中常用的手勢識別方法之一，用於識別使用者的點選行為並進行相應的處理。

透過點選手勢，我們可以實現一些常見的互動效果，比如按鈕點選、檢視切換、彈出選單等。當使用者點選螢幕時，系統會將該操作識別為點選手勢，並通知應用程式進行相應的處理。

介面說明：

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

image

案例：

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

image

🔎2.長按手勢（LongPressGesture）

長按手勢（LongPressGesture）是指使用者在螢幕上長時間按住一個元素或者某個區域，觸發的手勢操作。長按手勢通常用於實現某些特定的功能，比如彈出選單、編輯文字、刪除元素等。長按手勢的觸發時間通常比較長，根據不同的應用場景，可以設定觸發長按手勢所需的最小按住時間。

在移動裝置上，長按手勢通常包括以下幾個階段：

  1. 按下（Touch Down）：使用者按住螢幕上一個元素或者某個區域。
  2. 按住（Touch Hold）：使用者持續按住螢幕，一般在這個階段內可以實現一些操作，比如拖動元素、改變元素的位置等。
  3. 觸發（Touch Up Inside）：使用者鬆開手指，如果在按住階段內達到某個條件，則會觸發相應的操作，比如彈出選單。

長按手勢可以提供更多的互動方式和功能，使使用者能夠更方便地操作應用程式，提升使用者體驗。在移動應用開發中，可以使用相應的手勢識別庫或者框架來實現長按手勢的監聽和處理。

介面說明：

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

image

案例：

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

  build() {
    Column() {
      Text('LongPress OnAction:' + this.count).fontSize(28)
        .gesture(
          // 繫結可以重複觸發的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)
  }
}

image

🔎3.拖動手勢（PanGesture）

拖動手勢（PanGesture）是一種用於在移動裝置上識別使用者手指拖動操作的手勢。透過拖動手勢，使用者可以在螢幕上拖動某個物件，例如移動一個影像、滾動一個列表或調整一個檢視的位置。

拖動手勢通常包括以下幾個基本元素：

  • 起始點（起始位置）：使用者觸控螢幕的初始位置。
  • 移動點（當前位置）：使用者在螢幕上滑動手指時的當前位置。
  • 移動向量：起始點和移動點之間的向量，表示手指移動的方向和距離。

拖動手勢可以用於許多應用場景，例如：

  • 拖動和移動元素：使用者可以在螢幕上拖動影像、檢視或其他元素，以實現移動、重新排列或調整它們的位置。
  • 滾動檢視內容：使用者可以在滾動檢視中使用拖動手勢來滾動內容，以瀏覽長列表或檢視。
  • 雙指拖動：有些應用程式支援雙指拖動手勢，透過同時滑動兩個手指來實現某些特殊操作，例如旋轉或縮放影像。

在移動裝置的開發中，開發人員可以使用各種框架和技術，來實現拖動手勢的識別和處理。透過捕捉拖動手勢並處理它們，開發人員可以為使用者提供更流暢、直觀的介面互動體驗。

介面說明：

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

image

案例：

// 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(
          // 繫結拖動手勢
          PanGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start');
            })
              // 當觸發拖動手勢時，根據回撥函式修改元件的佈局位置資訊
            .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)
  }
}

image

🔎4.捏合手勢（PinchGesture）

捏合手勢（PinchGesture）是一種手勢操作，通常在觸控式螢幕上使用。它涉及使用兩個或更多的手指同時向內或向外移動，以縮小或放大螢幕上的內容。當手指向內移動時，被捏合的物體（如圖片、網頁等）將會被縮小；當手指向外移動時，被捏合的物體將會被放大。

捏合手勢在現代移動裝置中廣泛應用，例如在智慧手機和平板電腦上瀏覽照片、地圖、網頁等時經常使用捏合手勢來實現縮放功能。此外，捏合手勢也可以用於一些操作，例如在編輯應用程式中調整物件大小或在遊戲中控制角色的動作。

介面說明：

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

image

案例：

// 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 })
      // 在元件上繫結縮放比例，可以透過修改縮放比例來實現元件的縮小或者放大
      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
      .gesture(
        // 在元件上繫結三指觸發的捏合手勢
        PinchGesture({ fingers: 3 })
          .onActionStart((event: GestureEvent) => {
            console.info('Pinch start');
          })
            // 當捏合手勢觸發時，可以透過回撥函式獲取縮放比例，從而修改元件的縮放比例
          .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');
          })
      )
    }
  }
}

image

image

🔎5.旋轉手勢（RotationGesture）

旋轉手勢（Rotation Gesture）是一種常見的手勢識別方式，用於識別使用者在觸控式螢幕上進行旋轉操作的手勢。在移動裝置上，旋轉手勢通常使用兩個手指來執行旋轉操作。

在旋轉手勢中，使用者可以用兩個手指按住螢幕上的物件，並圍繞一個旋轉中心點進行旋轉動作。該手勢可以用於各種應用場景，例如在地圖應用中旋轉地圖方向，或在圖片編輯應用中旋轉影像。

當使用者進行旋轉手勢時，系統會根據手指的移動軌跡和角度變化來計算旋轉角度，並將其作為旋轉手勢的輸入。開發者可以透過手勢識別庫或框架來監聽和處理旋轉手勢，以實現相應的功能。

介面說明：

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

image

案例：

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

  build() {
    Column() {
      Text('RotationGesture angle:' + this.angle).fontSize(28)
        // 在元件上繫結旋轉佈局，可以透過修改旋轉角度來實現元件的旋轉
        .rotate({ angle: this.angle })
        .gesture(
          RotationGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('RotationGesture is onActionStart');
            })
              // 當旋轉手勢生效時，透過旋轉手勢的回撥函式獲取旋轉角度，從而修改元件的旋轉角度
            .onActionUpdate((event: GestureEvent) => {
              this.angle = this.rotateValue + event.angle;
              console.info('RotationGesture is onActionEnd');
            })
              // 當旋轉結束抬手時，固定元件在旋轉結束時的角度
            .onActionEnd(() => {
              this.rotateValue = this.angle;
              console.info('RotationGesture is onActionEnd');
            })
            .onActionCancel(() => {
              console.info('RotationGesture is onActionCancel');
            })
        )
    }
    .height(200)
    .width(250)
  }
}

image

image

🔎6.滑動手勢（SwipeGesture）

滑動手勢（SwipeGesture）是一種使用者介面互動行為，透過在觸控式螢幕上進行手指滑動操作來執行特定的動作或觸發特定的事件。滑動手勢通常用於移動應用程式中的頁面導航、圖片瀏覽、刪除操作等場景。

滑動手勢可以分為不同的方向，常見的包括向上滑動、向下滑動、向左滑動和向右滑動。使用者可以在螢幕上滑動手指，當手指的移動方向和距離達到一定的條件時，系統會識別為滑動手勢，並根據具體需求執行相應的操作。

滑動手勢通常使用在移動裝置或觸控式螢幕裝置上，透過手指的滑動來完成操作，比如在手機上可以透過向左滑動刪除一條訊息，在圖片瀏覽應用中可以透過向左滑動切換到下一張圖片等。滑動手勢的使用可以提高使用者體驗，使使用者能夠更自然、直觀地與應用程式進行互動。

介面說明：

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

image

案例：

// 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元件上繫結旋轉，透過滑動手勢的滑動速度和角度修改旋轉的角度
      .rotate({ angle: this.rotateAngle })
      .gesture(
        // 繫結滑動手勢且限制僅在豎直方向滑動時觸發
        SwipeGesture({ direction: SwipeDirection.Vertical })
          // 當滑動手勢觸發時，獲取滑動的速度和角度，實現對元件的佈局引數的修改
          .onAction((event: GestureEvent) => {
            this.speed = event.speed;
            this.rotateAngle = event.angle;
          })
      )
    }
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章