0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表PanGesture之基礎(chǔ)手勢

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-17 15:03 ? 次閱讀

PanGesture

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

說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

從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ù)描述
fingersnumber觸發(fā)拖動的最少手指數(shù),最小為1指, 最大取值為10指。 默認(rèn)值:1 取值范圍:[1,10]**說明:**當(dāng)設(shè)置的值小于1或不設(shè)置時,會被轉(zhuǎn)化為默認(rèn)值。
directionPanDirection觸發(fā)拖動的手勢方向,此枚舉值支持邏輯與(&)和邏輯或(
distancenumber最小拖動識別距離,單位為vp。 默認(rèn)值:5 說明: [Tabs組件]滑動與該拖動手勢事件同時存在時,可將distance值設(shè)為1,使拖動更靈敏,避免造成事件錯亂。 當(dāng)拖動距離的值小于等于0時,會被轉(zhuǎn)化為默認(rèn)值。

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ù)描述
fingersnumber觸發(fā)滑動的最少手指數(shù),最小為1指, 最大取值為10指。 默認(rèn)值:1
directionPanDirection設(shè)置滑動方向,此枚舉值支持邏輯與(&)和邏輯或(
distancenumber最小滑動識別距離,單位為vp。 默認(rèn)值:5.0 說明: [Tabs組件]滑動與該拖動手勢事件同時存在時,可將distance值設(shè)為1,使拖動更靈敏,避免造成事件錯亂。 當(dāng)拖動距離的值小于等于0時,會被轉(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手勢識別成功回調(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)原點進行移動
      // 左右拖動觸發(fā)該手勢事件
      .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手勢事件觸發(fā)條件改為雙指以任意方向拖動
          this.panOption.setDirection(PanDirection.All)
          this.panOption.setFingers(2)
        })
    }
  }
}

`HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789v直接拿`

新文檔.png

示意圖:

向左拖動:

zh-cn_image_0000001174264374

點擊按鈕修改PanGesture觸發(fā)條件,雙指向左下方拖動:

zh-cn_image1_0000001174264374

審核編輯 黃宇

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

    關(guān)注

    56

    文章

    2267

    瀏覽量

    42489
收藏 人收藏

    評論

    相關(guān)推薦

    HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS聲明開發(fā)范式

    基于ArkTS聲明開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、
    發(fā)表于 01-17 15:09

    鴻蒙開發(fā)ArkTS基礎(chǔ)知識

    一、ArkTS簡介 ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。它在TypeScript(簡稱TS)的基礎(chǔ)上,匹配了鴻蒙的ArkUI框架,擴展了
    的頭像 發(fā)表于 01-24 16:44 ?1783次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發(fā)</b><b class='flag-5'>之</b><b class='flag-5'>ArkTS</b>基礎(chǔ)知識

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【觸摸事件】

    當(dāng)手指在組件上按下、滑動、抬起時觸發(fā)。
    的頭像 發(fā)表于 05-27 09:34 ?321次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【觸摸事件】

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【顯隱控制】 通用屬性

    控制當(dāng)前組件顯示或隱藏。注意,即使組件處于隱藏狀態(tài),在頁面刷新時仍存在重新創(chuàng)建過程,因此當(dāng)對性能有嚴(yán)格要求時建議使用[條件渲染]代替。 默認(rèn)值:Visibility.Visible 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-03 14:46 ?462次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【顯隱控制】 通用屬性

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【形狀裁剪】 通用屬性

    參數(shù)為相應(yīng)類型的組件,按指定的形狀對當(dāng)前組件進行裁剪;參數(shù)為boolean類型時,設(shè)置是否按照父容器邊緣輪廓進行裁剪。 默認(rèn)值:false 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-04 15:22 ?317次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【形狀裁剪】 通用屬性

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【菜單控制】 通用屬性

    為組件綁定彈出菜單,彈出菜單以垂直列表形式顯示菜單項,可通過長按、點擊或鼠標(biāo)右鍵觸發(fā)。
    的頭像 發(fā)表于 06-06 09:17 ?355次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【菜單控制】 通用屬性

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【多態(tài)樣式】 通用屬性

    設(shè)置組件不同狀態(tài)的樣式。 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-07 09:48 ?279次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【多態(tài)樣式】 通用屬性

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【觸摸熱區(qū)設(shè)置】觸摸交互控制

    適用于支持通用點擊事件、通用觸摸事件、通用手勢處理的組件。
    的頭像 發(fā)表于 06-13 10:33 ?308次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【觸摸熱區(qū)設(shè)置】觸摸交互控制

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【綁定手勢方法】 手勢處理

    為組件綁定不同類型的手勢事件,并設(shè)置事件的響應(yīng)方法。
    的頭像 發(fā)表于 06-15 09:17 ?527次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【綁定<b class='flag-5'>手勢</b>方法】 <b class='flag-5'>手勢</b>處理

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【TapGesture】 基礎(chǔ)手勢

    支持單擊、雙擊和多次點擊事件的識別。
    的頭像 發(fā)表于 06-17 14:19 ?209次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【TapGesture】 基礎(chǔ)<b class='flag-5'>手勢</b>

    鴻蒙ArkTS聲明開發(fā)平臺支持列表LongPressGesture基礎(chǔ)手勢

    用于觸發(fā)長按手勢事件,觸發(fā)長按手勢的最少手指數(shù)為1,最短長按時間為500毫秒。
    的頭像 發(fā)表于 06-17 09:59 ?315次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>LongPressGesture<b class='flag-5'>之</b>基礎(chǔ)<b class='flag-5'>手勢</b>

    鴻蒙ArkTS聲明開發(fā)平臺支持列表PinchGesture基礎(chǔ)手勢

    用于觸發(fā)捏合手勢,觸發(fā)捏合手勢的最少手指為2指,最大為5指,最小識別距離為3vp。
    的頭像 發(fā)表于 06-18 09:33 ?208次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>PinchGesture<b class='flag-5'>之</b>基礎(chǔ)<b class='flag-5'>手勢</b>

    鴻蒙ArkTS聲明開發(fā)平臺支持列表RotationGesture基礎(chǔ)手勢

    用于觸發(fā)旋轉(zhuǎn)手勢事件,觸發(fā)旋轉(zhuǎn)手勢的最少手指為2指,最大為5指,最小改變度數(shù)為1度。
    的頭像 發(fā)表于 06-18 09:27 ?185次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>RotationGesture<b class='flag-5'>之</b>基礎(chǔ)<b class='flag-5'>手勢</b>

    鴻蒙ArkTS聲明開發(fā)平臺支持列表 SwipeGesture基礎(chǔ)手勢

    用于觸發(fā)滑動事件,滑動速度大于100vp/s時可識別成功。
    的頭像 發(fā)表于 06-18 14:59 ?218次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b> SwipeGesture<b class='flag-5'>之</b>基礎(chǔ)<b class='flag-5'>手勢</b>

    鴻蒙ArkTS聲明開發(fā)平臺支持列表 組合手勢

    手勢識別組合,即多種手勢組合為復(fù)合手勢,支持連續(xù)識別、并行識別和互斥識別。
    的頭像 發(fā)表于 06-19 09:33 ?237次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b> 組合<b class='flag-5'>手勢</b>