鴻蒙HarmonyOS實戰-ArkUI事件（組合手勢）

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

🚀一、組合手勢

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

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

image

組合手勢是由多個手勢組合而成的手勢動作。透過不同手勢的組合，可以完成更復雜的操作。例如，可以透過組合手勢來實現縮放、旋轉、滑動等操作。組合手勢可以提高使用者互動的靈活性和效率。

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

image

🔎1.順序識別

組合手勢的順序識別是指識別由多個手勢組合而成的特定順序的手勢。在手勢識別中，有些任務可能需要使用者按照特定的順序執行一系列手勢才能觸發某種操作或功能。例如，可以定義一個組合手勢，要求使用者首先做一個向左滑動，然後再做一個向上滑動，最後做一個點選動作才能執行某項操作。

組合手勢的順序識別可以應用於許多領域，如移動裝置上的手勢控制、虛擬現實、遊戲等。它提供了更復雜和精確的使用者互動方式，使得使用者能夠透過簡單的手勢組合來完成更多的操作或者控制。

// 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屬性可以實現元件的位置移動
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下組合手勢為順序識別，當長按手勢事件未正常觸發時不會觸發拖動手勢事件
    .gesture(
      // 宣告該組合手勢的型別為Sequence型別
      GestureGroup(GestureMode.Sequence,
        // 該組合手勢第一個觸發的手勢為長按手勢，且長按手勢可多次響應
        LongPressGesture({ repeat: true })
          // 當長按手勢識別成功，增加Text元件上顯示的count次數
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              this.count++;
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 當長按之後進行拖動，PanGesture手勢被觸發
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 當該手勢被觸發時，根據回撥獲得拖動的距離，修改該元件的位移距離從而實現元件的移動
          .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;
          })
      )
    )
  }
}

image

🔎2.並行識別

組合手勢的並行識別是指同時識別多個手勢的能力。通常，組合手勢是由多個基本手勢組合而成的，例如在手機螢幕上的滑動、橫掃或雙擊等。並行識別允許系統同時檢測和識別多個手勢，而不是一次只能識別一個手勢。這樣可以提高互動效率和使用者體驗，使使用者能夠更自由和靈活地操作裝置。

// 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)
    // 以下組合手勢為並行並別，單擊手勢識別成功後，若在規定時間內再次點選，雙擊手勢也會識別成功
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

image

🔎3.互斥識別

組合手勢互斥識別是指在多種手勢操作同時發生時，系統透過識別這些手勢的組合，來判斷使用者的意圖並執行相應的操作。互斥識別是指系統能夠判斷兩種或多種手勢的組合是否衝突，如果衝突則只執行其中一種手勢的操作，避免產生意料之外的結果或混亂。例如，在觸控式螢幕裝置上，使用者同時進行滑動和放大手勢操作時，系統可以透過互斥識別來判斷使用者是要進行滑動操作還是放大操作，並執行相應的操作。透過組合手勢互斥識別，可以提高使用者介面的互動性和操作的準確性。

// 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)
    //以下組合手勢為互斥並別，單擊手勢識別成功後，雙擊手勢會識別失敗
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

image

🚀寫在最後

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

image

相關文章