鴻蒙HarmonyOS實戰-ArkUI事件（手勢方法）

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

🚀一、手勢方法

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

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

image

🔎1.gesture（常規手勢繫結方法）

介面說明：

.gesture(gesture: GestureType, mask?: GestureMask)

案例：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        // 採用gesture手勢繫結方法繫結TapGesture
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
  }
}

image

🔎2.priorityGesture（帶優先順序的手勢繫結方法）

在HarmonyOS中，可以使用priorityGesture方法來實現帶有優先順序的手勢繫結。具體描述如下：

  • priorityGesture是一種帶有優先順序的手勢繫結方法，用於在元件上繫結優先識別的手勢。
  • 預設情況下，當父元件和子元件使用gesture方法繫結相同型別的手勢時，子元件優先識別透過gesture繫結的手勢。
  • 當父元件使用priorityGesture方法繫結與子元件同型別的手勢時，父元件優先識別透過priorityGesture繫結的手勢。

當父元件Column和子元件Text同時繫結TapGesture手勢時，如果父元件使用priorityGesture繫結了TapGesture手勢，那麼父元件會優先響應這個手勢，而子元件只有在父元件不處理該手勢時才能響應它。

介面說明：

.priorityGesture(gesture: GestureType, mask?: GestureMask)。

案例：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 設定為priorityGesture時，點選文字區域會忽略Text元件的TapGesture手勢事件，優先響應父元件Column的TapGesture手勢事件
    .priorityGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

image

🔎3.parallelGesture（並行手勢繫結方法）

在預設情況下，手勢事件是非冒泡事件，當父子元件繫結相同的手勢時，父子元件繫結的手勢事件會發生競爭，最多隻有一個元件的手勢事件能夠獲得響應。

然而，當父元件使用parallelGesture方法繫結並行手勢時，父子元件繫結的相同手勢事件都可以觸發，實現了類似冒泡效果。這意味著在這種情況下，父元件和子元件可以同時響應繫結的手勢事件。

透過使用parallelGesture方法，可以實現父子元件之間相同手勢事件的並行觸發，使得多個元件都能夠處理相同的手勢操作，提供更靈活和多樣化的互動效果。

介面說明：

.parallelGesture(gesture: GestureType, mask?: GestureMask)

案例：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 設定為parallelGesture時，點選文字區域會同時響應父元件Column和子元件Text的TapGesture手勢事件
    .parallelGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.Normal)
  }
}

image

注意GestureMask=GestureMask.IgnoreInternal時只會觸發父元件的

🚀寫在最後

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

相關文章