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

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

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

鴻蒙OS開發(fā):典型頁面場景【一次開發(fā),多端部署】(交互歸一)

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-27 14:16 ? 次閱讀

交互歸一

對(duì)于不同類型的智能設(shè)備,用戶可能有不同的交互方式,如通過觸摸屏、鼠標(biāo)、觸控板等。如果針對(duì)不同的交互方式單獨(dú)做適配,會(huì)增加開發(fā)工作量同時(shí)產(chǎn)生大量重復(fù)代碼。為解決這一問題,我們統(tǒng)一了各種交互方式的API,即實(shí)現(xiàn)了 交互歸一

基礎(chǔ)輸入

常見的基礎(chǔ)輸入方式及其在各輸入設(shè)備上的表現(xiàn)如下圖所示。

basic_guester

基礎(chǔ)輸入對(duì)應(yīng)的開發(fā)接口,以及當(dāng)前支持情況如下表所示。

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

輸入開發(fā)接口HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿觸控屏觸控板鼠標(biāo)
懸浮[onHover]NA
點(diǎn)擊[onClick]
雙擊[TapGesture]
長按[LongPressGesture]×
上下文菜單[ContentMenu]
拖拽[Drag]
輕掃[SwipeGesture]
滾動(dòng)及平移[PanGesture]
縮放[PinchGesture]
旋轉(zhuǎn)[RotationGesture]NA

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

  • 點(diǎn)擊事件(onClick)其實(shí)是點(diǎn)擊手勢(TapGesture)的一個(gè)特殊場景(單指單次點(diǎn)擊)。該場景使用的非常廣泛,為了方便開發(fā)者使用及符合傳統(tǒng)開發(fā)習(xí)慣,所以專門提供了開發(fā)接口。
  • 觸控板支持長按輸入的功能正在開發(fā)中。

拖拽事件

拖拽是應(yīng)用開發(fā)中經(jīng)常碰到的場景。拖拽發(fā)生在兩個(gè)組件之間,它不是簡單的單次輸入,而是一個(gè)”過程”,通常包含如下步驟(以將組件A拖拽到組件B中為例)。

  • 長按或點(diǎn)擊組件A,觸發(fā)拖拽。
  • 保持按壓或點(diǎn)擊,持續(xù)將組件A向組件B拖拽。
  • 抵達(dá)組件B中,釋放按壓點(diǎn)擊,完成拖拽。
  • 也可以在未抵達(dá)組件B的中途,釋放按壓點(diǎn)擊,取消拖拽。

一個(gè)完整的拖拽事件,包含多個(gè)拖拽子事件,如下表所示(請(qǐng)?jiān)L問拖拽事件了解詳細(xì)用法)。當(dāng)前觸控屏和鼠標(biāo)的拖拽事件已經(jīng)實(shí)現(xiàn)”交互歸一”,對(duì)手寫筆的支持正在開發(fā)中。

名稱功能描述
onDragStart綁定A組件,觸控屏長按/鼠標(biāo)左鍵按下后移動(dòng)觸發(fā)
onDragEnter綁定B組件,觸控屏手指、鼠標(biāo)移動(dòng)進(jìn)入B組件瞬間觸發(fā)
onDragMove綁定B組件,觸控屏手指、鼠標(biāo)在B組件內(nèi)移動(dòng)觸發(fā)
onDragLeave綁定B組件,觸控屏手指、鼠標(biāo)移動(dòng)退出B組件瞬間觸發(fā)
onDrop綁定B組件,在B組件內(nèi),觸控屏手指抬起、鼠標(biāo)左鍵松開時(shí)觸發(fā)

審核編輯 黃宇

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

    關(guān)注

    33

    文章

    8625

    瀏覽量

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

    關(guān)注

    57

    文章

    2365

    瀏覽量

    42893
  • 鴻蒙OS
    +關(guān)注

    關(guān)注

    0

    文章

    189

    瀏覽量

    4447
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    鴻蒙OS開發(fā)典型頁面場景一次開發(fā)多端部署】(功能開發(fā)

    應(yīng)用開發(fā)至少包含兩部分工作: UI頁面開發(fā)和底層功能開發(fā)(部分需要聯(lián)網(wǎng)的應(yīng)用還會(huì)涉及服務(wù)端開發(fā))。前面章節(jié)介紹了如何解決
    的頭像 發(fā)表于 05-28 17:32 ?606次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</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'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(功能<b class='flag-5'>開發(fā)</b>)

    鴻蒙OS開發(fā)典型頁面場景一次開發(fā)多端部署】(短信)案例介紹

    本章從系統(tǒng)預(yù)置的應(yīng)用中,選擇短信應(yīng)用作為典型的案例,從頁面開發(fā)和工程結(jié)構(gòu)的角度,介紹"多"的具體實(shí)踐。系統(tǒng)的產(chǎn)品形態(tài)在不斷豐富中,當(dāng)前主要有默認(rèn)設(shè)備和平板兩種產(chǎn)品形態(tài),本章的具體實(shí)踐
    的頭像 發(fā)表于 05-28 15:08 ?1302次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</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'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(短信)案例介紹

    鴻蒙OS開發(fā)典型頁面場景一次開發(fā)多端部署】(資源使用)

    頁面開發(fā)過程中,經(jīng)常需要用到顏色、字體、間距、圖片等資源,在不同的設(shè)備或配置中,這些資源的值可能不同。
    的頭像 發(fā)表于 05-28 09:44 ?1001次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</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'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(資源使用)

    鴻蒙OS開發(fā)典型頁面場景一次開發(fā),多端部署】實(shí)戰(zhàn)(設(shè)置典型頁面

    本示例展示了設(shè)置應(yīng)用的典型頁面,其在小窗口和大窗口有不同的顯示效果,體現(xiàn)一次開發(fā)、多端部署的能力
    的頭像 發(fā)表于 05-27 09:36 ?1171次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</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'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】實(shí)戰(zhàn)(設(shè)置<b class='flag-5'>典型</b><b class='flag-5'>頁面</b>)

    鴻蒙OS開發(fā)典型頁面場景一次開發(fā)多端部署】實(shí)戰(zhàn)(音樂專輯頁2)

    本示例使用[一次開發(fā)多端部署]中介紹的自適應(yīng)布局能力和響應(yīng)式布局能力進(jìn)行多設(shè)備(或多窗口尺寸)適配,保證應(yīng)用在不同設(shè)備或不同窗口尺寸下可以正常顯示。
    的頭像 發(fā)表于 05-25 16:47 ?2129次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</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'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】實(shí)戰(zhàn)(音樂專輯頁2)

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】(典型布局場景

    雖然不同應(yīng)用的頁面千變?nèi)f化,但對(duì)其進(jìn)行拆分和分析,頁面中的很多布局場景是相似的。本小節(jié)將介紹如何借助自適應(yīng)布局、響應(yīng)式布局以及常見的容器類組件,實(shí)現(xiàn)應(yīng)用中的典型布局
    的頭像 發(fā)表于 05-25 16:39 ?2185次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</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>)

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】(視頻應(yīng)用)

    者提供了“一次開發(fā),多端部署”的系統(tǒng)能力,讓開發(fā)者可以基于一次
    的頭像 發(fā)表于 05-25 16:29 ?4559次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</b>:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(視頻應(yīng)用)

    鴻蒙OS開發(fā):【一次開發(fā)多端部署】(音樂專輯頁面

    基于自適應(yīng)和響應(yīng)式布局,實(shí)現(xiàn)一次開發(fā)多端部署音樂專輯頁面。
    的頭像 發(fā)表于 05-25 16:21 ?815次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</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>)

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】(多設(shè)備自適應(yīng)能力)簡單介紹

    本示例是《一次開發(fā),多端部署》的配套示例代碼,展示了[頁面開發(fā)
    的頭像 發(fā)表于 05-21 14:59 ?2462次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</b>:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(多設(shè)備自適應(yīng)能力)簡單介紹

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】( 設(shè)置app頁面

    本示例展示了設(shè)置應(yīng)用的典型頁面,其在小窗口和大窗口有不同的顯示效果,體現(xiàn)一次開發(fā)、多端部署的能力
    的頭像 發(fā)表于 05-21 14:56 ?1208次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</b>:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】( 設(shè)置app<b class='flag-5'>頁面</b>)

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】(音樂專輯主頁)

    本示例使用一次開發(fā)多端部署中介紹的自適應(yīng)布局能力和響應(yīng)式布局能力進(jìn)行多設(shè)備(或多窗口尺寸)適配,保證應(yīng)用在不同設(shè)備或不同窗口尺寸下可以正常顯示。
    的頭像 發(fā)表于 05-21 14:48 ?802次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</b>:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(音樂專輯主頁)

    鴻蒙OS開發(fā):【一次開發(fā)多端部署】(多天氣)項(xiàng)目

    本示例展示個(gè)天氣應(yīng)用界面,包括首頁、城市管理、添加城市、更新時(shí)間彈窗,體現(xiàn)一次開發(fā),多端部署的能力。
    的頭像 發(fā)表于 05-20 14:59 ?861次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</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>多天氣)項(xiàng)目

    鴻蒙OS開發(fā):【一次開發(fā),多端部署】應(yīng)用(交互

    對(duì)于不同類型的智能設(shè)備,用戶可能有不同的交互方式,如通過觸摸屏、鼠標(biāo)、觸控板等。如果針對(duì)不同的交互方式單獨(dú)做適配,會(huì)增加開發(fā)工作量同時(shí)產(chǎn)生大量重復(fù)代碼。為解決這問題,我們統(tǒng)
    的頭像 發(fā)表于 05-17 15:31 ?522次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>開發(fā)</b>:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】應(yīng)用(<b class='flag-5'>交互</b><b class='flag-5'>歸</b><b class='flag-5'>一</b>)

    HarmonyOS開發(fā)案例:【一次開發(fā)多端部署-音樂專輯】

    基于自適應(yīng)和響應(yīng)式布局,實(shí)現(xiàn)一次開發(fā)、多端部署音樂專輯頁面。
    的頭像 發(fā)表于 05-13 16:48 ?697次閱讀
    HarmonyOS<b class='flag-5'>開發(fā)</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>-音樂專輯】

    HarmonyOS開發(fā)案例:【一次開發(fā)多端部署(視頻應(yīng)用)】

    者提供了“一次開發(fā),多端部署”的系統(tǒng)能力,讓開發(fā)者可以基于一次
    的頭像 發(fā)表于 05-11 15:41 ?1496次閱讀
    HarmonyOS<b class='flag-5'>開發(fā)</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>開發(fā)</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>(視頻應(yīng)用)】