閱讀(672) 書簽贊(0) 我要糾錯

綁定手勢方法

2024-01-22 16:46 更新

為組件綁定不同類型的手勢事件，并設(shè)置事件的響應(yīng)方法。

說明

從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

綁定手勢識別

通過如下屬性給組件綁定手勢識別，手勢識別成功后可以通過事件回調(diào)通知組件。

名稱	參數(shù)類型	默認(rèn)值	描述
gesture	gesture: GestureType, mask?: GestureMask	gesture: -， mask: GestureMask.Normal	綁定手勢。 - gesture: 綁定的手勢類型， - mask: 事件響應(yīng)設(shè)置。
priorityGesture	gesture: GestureType, mask?: GestureMask	gesture: -， mask: GestureMask.Normal	綁定優(yōu)先識別手勢。 - gesture: 綁定的手勢類型， - mask: 事件響應(yīng)設(shè)置。 1、默認(rèn)情況下，子組件優(yōu)先識別通過gesture綁定的手勢，當(dāng)父組件配置priorityGesture時，父組件優(yōu)先識別priorityGesture綁定的手勢。 2、長按手勢時，設(shè)置觸發(fā)長按的最短時間小的組件會優(yōu)先響應(yīng)，會忽略priorityGesture設(shè)置。
parallelGesture	gesture: GestureType, mask?: GestureMask	gesture: -， mask: GestureMask.Normal	綁定可與子組件手勢同時觸發(fā)的手勢。 - gesture: 綁定的手勢類型。 - mask: 事件響應(yīng)設(shè)置。手勢事件為非冒泡事件。父組件設(shè)置parallelGesture時，父子組件相同的手勢事件都可以觸發(fā)，實現(xiàn)類似冒泡效果。若父子組件中同時綁定單擊手勢事件和雙擊手勢事件，則只響應(yīng)單擊手勢事件。

名稱

參數(shù)類型

默認(rèn)值

描述

gesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定手勢。

- gesture: 綁定的手勢類型，

- mask: 事件響應(yīng)設(shè)置。

priorityGesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定優(yōu)先識別手勢。

- gesture: 綁定的手勢類型，

- mask: 事件響應(yīng)設(shè)置。

1、默認(rèn)情況下，子組件優(yōu)先識別通過gesture綁定的手勢，當(dāng)父組件配置priorityGesture時，父組件優(yōu)先識別priorityGesture綁定的手勢。

2、長按手勢時，設(shè)置觸發(fā)長按的最短時間小的組件會優(yōu)先響應(yīng)，會忽略priorityGesture設(shè)置。

parallelGesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定可與子組件手勢同時觸發(fā)的手勢。

- gesture: 綁定的手勢類型。

- mask: 事件響應(yīng)設(shè)置。

手勢事件為非冒泡事件。父組件設(shè)置parallelGesture時，父子組件相同的手勢事件都可以觸發(fā)，實現(xiàn)類似冒泡效果。若父子組件中同時綁定單擊手勢事件和雙擊手勢事件，則只響應(yīng)單擊手勢事件。

GestureType

名稱	描述
TapGesture	點擊手勢，支持單次點擊、多次點擊識別。
LongPressGesture	長按手勢。
PanGesture	平移手勢，滑動最小距離為5vp時識別成功。
PinchGesture	捏合手勢。
RotationGesture	旋轉(zhuǎn)手勢。
SwipeGesture	滑動手勢，滑動最小速度為100vp/s時識別成功。
GestureGroup	手勢識別組，多種手勢組合為復(fù)合手勢，支持連續(xù)識別、并行識別和互斥識別。

GestureMask枚舉說明

名稱	描述
Normal	不屏蔽子組件的手勢，按照默認(rèn)手勢識別順序進(jìn)行識別。
IgnoreInternal	屏蔽子組件的手勢，包括子組件上系統(tǒng)內(nèi)置的手勢，如子組件為List組件時，內(nèi)置的滑動手勢同樣會被屏蔽。

響應(yīng)手勢事件

組件通過手勢事件綁定不同GestureType的手勢對象，各手勢對象在響應(yīng)手勢操作的事件回調(diào)中提供手勢相關(guān)信息。下面通過TapGesture手勢對象的onAction事件響應(yīng)點擊事件，獲取事件相關(guān)信息。其余手勢對象的事件定義見各個手勢對象章節(jié)。若需綁定多種手勢請使用組合手勢。

TapGesture事件說明

名稱	功能描述
onAction((event?:GestureEvent) => void)	Tap手勢識別成功回調(diào)。

GestureEvent對象說明

名稱	類型	描述
repeat	boolean	是否為重復(fù)觸發(fā)事件，用于LongPressGesture手勢觸發(fā)場景。
offsetX	number	手勢事件x軸相對偏移量，單位為vp，用于PanGesture手勢觸發(fā)場景，從左向右滑動offsetX為正，反之為負(fù)。
offsetY	number	手勢事件y軸相對偏移量，單位為vp，用于PanGesture手勢觸發(fā)場景，從上向下滑動offsetY為正，反之為負(fù)。
angle	number	用于RotationGesture手勢觸發(fā)場景時，表示旋轉(zhuǎn)角度。用于SwipeGesture手勢觸發(fā)場景時，表示滑動手勢的角度，即兩根手指間的線段與水平方向的夾角變化的度數(shù)。說明：角度計算方式：滑動手勢被識別到后，連接兩根手指之間的線被識別為起始線條，隨著手指的滑動，手指之間的線條會發(fā)生旋轉(zhuǎn)，根據(jù)起始線條兩端點和當(dāng)前線條兩端點的坐標(biāo)，使用反正切函數(shù)分別計算其相對于水平方向的夾角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)為旋轉(zhuǎn)的角度。以起始線條為坐標(biāo)系，順時針旋轉(zhuǎn)為0到180度，逆時針旋轉(zhuǎn)為-180到0度。
scale	number	縮放比例，用于PinchGesture手勢觸發(fā)場景。
pinchCenterX	number	捏合手勢中心點相對于當(dāng)前組件元素左上角x軸坐標(biāo)，單位為vp，用于PinchGesture手勢觸發(fā)場景。
pinchCenterY	number	捏合手勢中心點相對于當(dāng)前組件元素左上角y軸坐標(biāo)，單位為vp，用于PinchGesture手勢觸發(fā)場景。
speed8+	number	滑動手勢速度，即所有手指滑動的平均速度，單位為vp/秒，用于SwipeGesture手勢觸發(fā)場景。
fingerList8+	FingerInfo[]	觸發(fā)事件的所有手指信息，用于LongPressGesture與TapGesture手勢觸發(fā)場景。
timestamp8+	number	事件時間戳。
target8+	EventTarget	觸發(fā)手勢事件的元素對象顯示區(qū)域。
source8+	SourceType	事件輸入設(shè)備。
pressure9+	number	按壓的壓力大小。
tiltX9+	number	手寫筆在設(shè)備平面上的投影與設(shè)備平面X軸的夾角。
tiltY9+	number	手寫筆在設(shè)備平面上的投影與設(shè)備平面Y軸的夾角。
sourceTool9+	SourceTool	事件輸入源。

SourceType枚舉說明

名稱	描述
Unknown	未知設(shè)備。
Mouse	鼠標(biāo)。
TouchScreen	觸摸屏。

FingerInfo對象說明

名稱	類型	描述
id	number	手指的索引編號。
globalX	number	相對于應(yīng)用窗口左上角的x軸坐標(biāo)。
globalY	number	相對于應(yīng)用窗口左上角的y軸坐標(biāo)。
localX	number	相對于當(dāng)前組件元素左上角的x軸坐標(biāo)。
localY	number	相對于當(dāng)前組件元素左上角的y軸坐標(biāo)。

SourceTool枚舉說明

名稱	描述
Unknown	未知輸入源。
Finger	手指輸入。
Pen	手寫筆輸入。

示例


// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
  @State priorityTestValue: string = ''
  @State parallelTestValue: string = ''

  build() {
    Column() {
      Column() {
        Text('TapGesture:' + this.priorityTestValue).fontSize(28)
          .gesture(
          TapGesture()
            .onAction(() => {
              this.priorityTestValue += '\nText'
            }))
      }
      .height(200)
      .width(250)
      .padding(20)
      .margin(20)
      .border({ width: 3 })
      // 設(shè)置為priorityGesture時，點擊文本會忽略Text組件的TapGesture手勢事件，優(yōu)先識別父組件Column的TapGesture手勢事件
      .priorityGesture(
      TapGesture()
        .onAction((event: GestureEvent) => {
          this.priorityTestValue += '\nColumn'
        }), GestureMask.IgnoreInternal)

      Column() {
        Text('TapGesture:' + this.parallelTestValue).fontSize(28)
          .gesture(
          TapGesture()
            .onAction(() => {
              this.parallelTestValue += '\nText'
            }))
      }
      .height(200)
      .width(250)
      .padding(20)
      .margin(20)
      .border({ width: 3 })
      // 設(shè)置為parallelGesture時，點擊文本會同時觸發(fā)子組件Text與父組件Column的TapGesture手勢事件
      .parallelGesture(
      TapGesture()
        .onAction((event: GestureEvent) => {
          this.parallelTestValue += '\nColumn'
        }), GestureMask.Normal)
    }
  }
}

以上內(nèi)容是否對您有幫助：

← 點擊控制

單擊、雙擊和多次點擊事件的識別 →

寫筆記

我要補充

綁定手勢方法

綁定手勢識別

GestureType

GestureMask枚舉說明

響應(yīng)手勢事件

GestureEvent對象說明

SourceType枚舉說明

FingerInfo對象說明

SourceTool枚舉說明

示例

推薦文章

推薦教程

推薦課程