綁定手勢(shì)方法

2024-02-07 12:49 更新

通過給各個(gè)組件綁定不同的手勢(shì)事件，并設(shè)計(jì)事件的響應(yīng)方式，當(dāng)手勢(shì)識(shí)別成功時(shí)，ArkUI框架將通過事件回調(diào)通知組件手勢(shì)識(shí)別的結(jié)果。

gesture（常規(guī)手勢(shì)綁定方法）

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

gesture為通用的一種手勢(shì)綁定方法，可以將手勢(shì)綁定到對(duì)應(yīng)的組件上。

例如，可以將點(diǎn)擊手勢(shì)TapGesture通過gesture手勢(shì)綁定方法綁定到Text組件上。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5.   build() {
  6.     Column() {
  7.       Text('Gesture').fontSize(28)
  8.         // 采用gesture手勢(shì)綁定方法綁定TapGesture
  9.         .gesture(
  10.           TapGesture()
  11.             .onAction(() => {
  12.               console.info('TapGesture is onAction');
  13.             }))
  14.     }
  15.     .height(200)
  16.     .width(250)
  17.   }
  18. }

priorityGesture（帶優(yōu)先級(jí)的手勢(shì)綁定方法）

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

priorityGesture是帶優(yōu)先級(jí)的手勢(shì)綁定方法，可以在組件上綁定優(yōu)先識(shí)別的手勢(shì)。

在默認(rèn)情況下，當(dāng)父組件和子組件使用gesture綁定同類型的手勢(shì)時(shí)，子組件優(yōu)先識(shí)別通過gesture綁定的手勢(shì)。當(dāng)父組件使用priorityGesture綁定與子組件同類型的手勢(shì)時(shí)，父組件優(yōu)先識(shí)別通過priorityGesture綁定的手勢(shì)。

例如，當(dāng)父組件Column和子組件Text同時(shí)綁定TapGesture手勢(shì)時(shí)，父組件以帶優(yōu)先級(jí)手勢(shì)priorityGesture的形式進(jìn)行綁定時(shí)，優(yōu)先響應(yīng)父組件綁定的TapGesture。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5.   build() {
  6.     Column() {
  7.       Text('Gesture').fontSize(28)
  8.         .gesture(
  9.           TapGesture()
  10.             .onAction(() => {
  11.               console.info('Text TapGesture is onAction');
  12.             }))
  13.     }
  14.     .height(200)
  15.     .width(250)
  16.     // 設(shè)置為priorityGesture時(shí)，點(diǎn)擊文本區(qū)域會(huì)忽略Text組件的TapGesture手勢(shì)事件，優(yōu)先響應(yīng)父組件Column的TapGesture手勢(shì)事件
  17.     .priorityGesture(
  18.       TapGesture()
  19.         .onAction(() => {
  20.           console.info('Column TapGesture is onAction');
  21.         }), GestureMask.IgnoreInternal)
  22.   }
  23. }

parallelGesture（并行手勢(shì)綁定方法）

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

parallelGesture是并行的手勢(shì)綁定方法，可以在父子組件上綁定可以同時(shí)響應(yīng)的相同手勢(shì)。

在默認(rèn)情況下，手勢(shì)事件為非冒泡事件，當(dāng)父子組件綁定相同的手勢(shì)時(shí)，父子組件綁定的手勢(shì)事件會(huì)發(fā)生競(jìng)爭(zhēng)，最多只有一個(gè)組件的手勢(shì)事件能夠獲得響應(yīng)。而當(dāng)父組件綁定了并行手勢(shì)parallelGesture時(shí)，父子組件相同的手勢(shì)事件都可以觸發(fā)，實(shí)現(xiàn)類似冒泡效果。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5.   build() {
  6.     Column() {
  7.       Text('Gesture').fontSize(28)
  8.         .gesture(
  9.           TapGesture()
  10.             .onAction(() => {
  11.               console.info('Text TapGesture is onAction');
  12.             }))
  13.     }
  14.     .height(200)
  15.     .width(250)
  16.     // 設(shè)置為parallelGesture時(shí)，點(diǎn)擊文本區(qū)域會(huì)同時(shí)響應(yīng)父組件Column和子組件Text的TapGesture手勢(shì)事件
  17.     .parallelGesture(
  18.       TapGesture()
  19.         .onAction(() => {
  20.           console.info('Column TapGesture is onAction');
  21.         }), GestureMask.IgnoreInternal)
  22.   }
  23. }
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)