PanGesture

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

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從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ì)方向，此枚舉值支持邏輯與(&)和邏輯或（
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)值。

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)方向，此枚舉值支持邏輯與(&)和邏輯或（
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ò)亂。當(dāng)拖動(dòng)距離的值小于等于0時(shí)，會(huì)被轉(zhuǎn)化為默認(rèn)值。

接口

名稱	功能描述
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) = > {
          if (event) {
            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)
        })
    }
  }
}

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

新文檔.png

示意圖：

向左拖動(dòng)：

zh-cn_image_0000001174264374

點(diǎn)擊按鈕修改PanGesture觸發(fā)條件，雙指向左下方拖動(dòng)：

zh-cn_image1_0000001174264374

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴