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

觸發(fā)拖動手勢事件

2024-01-22 16:48 更新

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

說明

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

接口

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

參數(shù)：

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

參數(shù)名稱

參數(shù)類型

必填

參數(shù)描述

fingers

number

否

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

默認(rèn)值：1

取值范圍：[1,10]

說明：

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

direction

PanDirection

否

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

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

distance

number

否

最小拖動識別距離，單位為vp。

默認(rèn)值：5

說明：

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

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

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

PanDirection枚舉說明

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

PanGestureOptions

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

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

參數(shù)：

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

參數(shù)名稱

參數(shù)類型

必填

參數(shù)描述

fingers

number

否

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

默認(rèn)值：1

direction

PanDirection

否

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

默認(rèn)值：All

distance

number

否

最小滑動識別距離，單位為vp。

默認(rèn)值：5.0

說明：

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

接口

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

事件

名稱	功能描述
onActionStart(event: (event?: GestureEvent) => void)	Pan手勢識別成功回調(diào)。
onActionUpdate(event: (event?: GestureEvent) => void)	Pan手勢移動過程中回調(diào)。
onActionEnd(event: (event?: GestureEvent) => void)	Pan手勢識別成功，手指抬起后觸發(fā)回調(diào)。
onActionCancel(event: () => void)	Pan手勢識別成功，接收到觸摸取消事件觸發(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)原點進(jìn)行移動
      // 左右拖動觸發(fā)該手勢事件
      .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手勢事件觸發(fā)條件改為雙指以任意方向拖動
          this.panOption.setDirection(PanDirection.All)
          this.panOption.setFingers(2)
        })
    }
  }
}