閱讀(664) 書(shū)簽贊(0) 我要糾錯(cuò)

觸發(fā)拖動(dòng)手勢(shì)事件

2024-01-22 16:48 更新

用于觸發(fā)拖動(dòng)手勢(shì)事件，滑動(dòng)的最小距離為5vp時(shí)拖動(dòng)手勢(shì)識(shí)別成功。

說(shuō)明

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

接口

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

參數(shù)：

參數(shù)名稱	參數(shù)類型	必填	參數(shù)描述
fingers	number	否	觸發(fā)拖動(dòng)的最少手指數(shù)，最小為1指，最大取值為10指。默認(rèn)值：1 取值范圍：[1,10] 說(shuō)明：當(dāng)設(shè)置的值小于1或不設(shè)置時(shí)，會(huì)被轉(zhuǎn)化為默認(rèn)值。
direction	PanDirection	否	觸發(fā)拖動(dòng)的手勢(shì)方向，此枚舉值支持邏輯與(&)和邏輯或（\|）運(yùn)算。默認(rèn)值：PanDirection.All
distance	number	否	最小拖動(dòng)識(shí)別距離，單位為vp。默認(rèn)值：5 說(shuō)明： Tabs組件滑動(dòng)與該拖動(dòng)手勢(shì)事件同時(shí)存在時(shí)，可將distance值設(shè)為1，使拖動(dòng)更靈敏，避免造成事件錯(cuò)亂。當(dāng)拖動(dòng)距離的值小于等于0時(shí)，會(huì)被轉(zhuǎn)化為默認(rèn)值。當(dāng)設(shè)置拖動(dòng)的距離超過(guò)當(dāng)前窗口尺寸的值時(shí)，無(wú)法觸發(fā)拖動(dòng)。

參數(shù)名稱

參數(shù)類型

必填

參數(shù)描述

fingers

number

否

觸發(fā)拖動(dòng)的最少手指數(shù)，最小為1指，最大取值為10指。

默認(rèn)值：1

取值范圍：[1,10]

說(shuō)明：

當(dāng)設(shè)置的值小于1或不設(shè)置時(shí)，會(huì)被轉(zhuǎn)化為默認(rèn)值。

direction

PanDirection

否

觸發(fā)拖動(dòng)的手勢(shì)方向，此枚舉值支持邏輯與(&)和邏輯或（|）運(yùn)算。

默認(rèn)值：PanDirection.All

distance

number

否

最小拖動(dòng)識(shí)別距離，單位為vp。

默認(rèn)值：5

說(shuō)明：

Tabs組件滑動(dòng)與該拖動(dòng)手勢(shì)事件同時(shí)存在時(shí)，可將distance值設(shè)為1，使拖動(dòng)更靈敏，避免造成事件錯(cuò)亂。

當(dāng)拖動(dòng)距離的值小于等于0時(shí)，會(huì)被轉(zhuǎn)化為默認(rèn)值。

當(dāng)設(shè)置拖動(dòng)的距離超過(guò)當(dāng)前窗口尺寸的值時(shí)，無(wú)法觸發(fā)拖動(dòng)。

PanDirection枚舉說(shuō)明

名稱	描述
All	所有方向。
Horizontal	水平方向。
Vertical	豎直方向。
Left	向左拖動(dòng)。
Right	向右拖動(dòng)。
Up	向上拖動(dòng)。
Down	向下拖動(dòng)。
None	任何方向都不可觸發(fā)拖動(dòng)手勢(shì)事件。

PanGestureOptions

通過(guò)PanGestureOptions對(duì)象接口可以動(dòng)態(tài)修改滑動(dòng)手勢(shì)識(shí)別器的屬性，從而避免通過(guò)狀態(tài)變量修改屬性（狀態(tài)變量修改會(huì)導(dǎo)致UI刷新）。

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

參數(shù)：

參數(shù)名稱	參數(shù)類型	必填	參數(shù)描述
fingers	number	否	觸發(fā)滑動(dòng)的最少手指數(shù)，最小為1指，最大取值為10指。默認(rèn)值：1
direction	PanDirection	否	設(shè)置滑動(dòng)方向，此枚舉值支持邏輯與(&)和邏輯或（\|）運(yùn)算。默認(rèn)值：All
distance	number	否	最小滑動(dòng)識(shí)別距離，單位為vp。默認(rèn)值：5.0 說(shuō)明： Tabs組件滑動(dòng)與該拖動(dòng)手勢(shì)事件同時(shí)存在時(shí)，可將distance值設(shè)為1，使拖動(dòng)更靈敏，避免造成事件錯(cuò)亂。

參數(shù)名稱

參數(shù)類型

必填

參數(shù)描述

fingers

number

否

觸發(fā)滑動(dòng)的最少手指數(shù)，最小為1指，最大取值為10指。

默認(rèn)值：1

direction

PanDirection

否

設(shè)置滑動(dòng)方向，此枚舉值支持邏輯與(&)和邏輯或（|）運(yùn)算。

默認(rèn)值：All

distance

number

否

最小滑動(dòng)識(shí)別距離，單位為vp。

默認(rèn)值：5.0

說(shuō)明：

Tabs組件滑動(dòng)與該拖動(dòng)手勢(shì)事件同時(shí)存在時(shí)，可將distance值設(shè)為1，使拖動(dòng)更靈敏，避免造成事件錯(cuò)亂。

接口

名稱	功能描述
setDirection(value: PanDirection)	設(shè)置direction屬性。
setDistance(value: number)	設(shè)置distance屬性。
setFingers(value: number)	設(shè)置fingers屬性。

事件

名稱	功能描述
onActionStart(event: (event?: GestureEvent) => void)	Pan手勢(shì)識(shí)別成功回調(diào)。
onActionUpdate(event: (event?: GestureEvent) => void)	Pan手勢(shì)移動(dòng)過(guò)程中回調(diào)。
onActionEnd(event: (event?: GestureEvent) => void)	Pan手勢(shì)識(shí)別成功，手指抬起后觸發(fā)回調(diào)。
onActionCancel(event: () => void)	Pan手勢(shì)識(shí)別成功，接收到觸摸取消事件觸發(fā)回調(diào)。

示例


// xxx.ets
@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Column() {
        Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(50)
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 })// 以組件左上角為坐標(biāo)原點(diǎn)進(jìn)行移動(dòng)
      // 左右拖動(dòng)觸發(fā)該手勢(shì)事件
      .gesture(
      PanGesture(this.panOption)
        .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
          console.info('Pan end')
        })
      )

      Button('修改PanGesture觸發(fā)條件')
        .onClick(() => {
          // 將PanGesture手勢(shì)事件觸發(fā)條件改為雙指以任意方向拖動(dòng)
          this.panOption.setDirection(PanDirection.All)
          this.panOption.setFingers(2)
        })
    }
  }
}