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

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

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

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

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

綁定手勢方法

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

說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點(diǎn)擊或者復(fù)制轉(zhuǎn)到。
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

綁定手勢識別

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

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

GestureType

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

GestureMask枚舉說明

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

響應(yīng)手勢事件

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

TapGesture事件說明

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

GestureEvent對象說明

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

SourceType枚舉說明

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

FingerInfo對象說明

名稱類型描述
idnumber手指的索引編號。
globalXnumber相對于應(yīng)用窗口左上角的x軸坐標(biāo)。
globalYnumber相對于應(yīng)用窗口左上角的y軸坐標(biāo)。
localXnumber相對于當(dāng)前組件元素左上角的x軸坐標(biāo)。
localYnumber相對于當(dāng)前組件元素左上角的y軸坐標(biāo)。

SourceTool枚舉說明

名稱描述
Unknown未知輸入源。
Finger手指輸入。
Pen手寫筆輸入。HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151450.png

示例

// 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時(shí),點(diǎn)擊文本會忽略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時(shí),點(diǎn)擊文本會同時(shí)觸發(fā)子組件Text與父組件Column的TapGesture手勢事件
      .parallelGesture(
      TapGesture()
        .onAction((event: GestureEvent) = > {
          this.parallelTestValue += 'nColumn'
        }), GestureMask.Normal)
    }
  }
}

zh-cn_image_0000001210195016

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

    關(guān)注

    1

    文章

    503

    瀏覽量

    17786
  • 手勢
    +關(guān)注

    關(guān)注

    0

    文章

    7

    瀏覽量

    5000
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2302

    瀏覽量

    42689
收藏 人收藏

    評論

    相關(guān)推薦

    HarmonyOS應(yīng)用API手勢方法-綁定手勢方法

    述:為組件綁定不同類型的手勢事件,并設(shè)置事件的響應(yīng)方法。Api:從API Version 7開始支持一、綁定
    發(fā)表于 11-23 15:53

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

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

    HarmonyOS/OpenHarmony(Stage模型)應(yīng)用開發(fā)手勢綁定方法

    通過給各個(gè)組件綁定不同的手勢事件,并設(shè)計(jì)事件的響應(yīng)方式,當(dāng)手勢識別成功時(shí),ArkUI框架將通過事件回調(diào)通知組件手勢識別的結(jié)果。 一、gesture(常規(guī)
    發(fā)表于 08-29 15:24

    HarmonyOS/OpenHarmony(Stage模型)應(yīng)用開發(fā)組合手勢(一)連續(xù)識別

    組合手勢由多種單一手勢組合而成,通過在GestureGroup中使用不同的GestureMode來聲明該組合手勢的類型,支持連續(xù)識別、并行識
    發(fā)表于 09-07 15:20

    鴻蒙ArkTS聲明開發(fā)平臺支持列表【焦點(diǎn)事件】

    焦點(diǎn)事件指頁面焦點(diǎn)在可獲焦組件間移動(dòng)時(shí)觸發(fā)的事件,組件可使用焦點(diǎn)事件來處理相關(guān)邏輯。
    的頭像 發(fā)表于 05-27 22:17 ?259次閱讀
    <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>【焦點(diǎn)事件】

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

    參數(shù)為相應(yīng)類型的組件,按指定的形狀對當(dāng)前組件進(jìn)行裁剪;參數(shù)為boolean類型時(shí),設(shè)置是否按照父容器邊緣輪廓進(jìn)行裁剪。 默認(rèn)值:false 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-04 15:22 ?406次閱讀
    <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ā)平臺支持列表【菜單控制】 通用屬性

    為組件綁定彈出菜單,彈出菜單以垂直列表形式顯示菜單項(xiàng),可通過長按、點(diǎn)擊或鼠標(biāo)右鍵觸發(fā)。
    的頭像 發(fā)表于 06-06 09:17 ?495次閱讀
    <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 ?347次閱讀
    <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è)置】觸摸交互控制

    適用于支持通用點(diǎn)擊事件、通用觸摸事件、通用手勢處理的組件。
    的頭像 發(fā)表于 06-13 10:33 ?398次閱讀
    <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ā)平臺支持列表【TapGesture】 基礎(chǔ)手勢

    支持單擊、雙擊和多次點(diǎn)擊事件的識別。
    的頭像 發(fā)表于 06-17 14:19 ?285次閱讀
    <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,最短長按時(shí)間為500毫秒。
    的頭像 發(fā)表于 06-17 09:59 ?389次閱讀
    <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之基礎(chǔ)<b class='flag-5'>手勢</b>

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

    用于觸發(fā)拖動(dòng)手勢事件,滑動(dòng)的最小距離為5vp時(shí)拖動(dòng)手勢識別成功。
    的頭像 發(fā)表于 06-17 15:03 ?368次閱讀
    <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>PanGesture之基礎(chǔ)<b class='flag-5'>手勢</b>

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

    用于觸發(fā)捏合手勢,觸發(fā)捏合手勢的最少手指為2指,最大為5指,最小識別距離為3vp。
    的頭像 發(fā)表于 06-18 09:33 ?284次閱讀
    <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之基礎(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 ?241次閱讀
    <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之基礎(chǔ)<b class='flag-5'>手勢</b>

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

    手勢識別組合,即多種手勢組合為復(fù)合手勢,支持連續(xù)識別、并行識別和互斥識別。
    的頭像 發(fā)表于 06-19 09:33 ?349次閱讀
    <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>