0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS开发:【一次开发,多端部署】应用(交互归一)

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-17 15:31 次阅读

对于不同类型的智能设备,用户可能有不同的交互方式,如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配,会增加开发工作量同时产生大量重复代码。为解决这一问题,我们统一了各种交互方式的API,即实现了 交互归一

基础输入

常见的基础输入方式及其在各输入设备上的表现如下图所示。

basic_guester

基础输入对应的开发接口,以及当前支持情况如下表所示。

开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

输入开发接口触控屏触控板鼠标
悬浮[onHover]NA
点击[onClick]
双击[TapGesture]
长按[LongPressGesture]×
上下文菜单[ContentMenu]
拖拽[Drag]
轻扫[SwipeGesture]
滚动及平移[PanGesture]
缩放[PinchGesture]
旋转[RotationGesture]NA

说明:

  • 点击事件(onClick)其实是点击手势(TapGesture)的一个特殊场景(单指单次点击)。该场景使用的非常广泛,为了方便开发者使用及符合传统开发习惯,所以专门提供了开发接口。
  • 触控板支持长按输入的功能正在开发中。

拖拽事件

拖拽是应用开发中经常碰到的场景。拖拽发生在两个组件之间,它不是简单的单次输入,而是一个”过程”,通常包含如下步骤(以将组件A拖拽到组件B中为例)。

  • 长按或点击组件A,触发拖拽。
  • 保持按压或点击,持续将组件A向组件B拖拽。
  • 抵达组件B中,释放按压点击,完成拖拽。
  • 也可以在未抵达组件B的中途,释放按压点击,取消拖拽。

一个完整的拖拽事件,包含多个拖拽子事件,如下表所示(请访问拖拽事件了解详细用法)。当前触控屏和鼠标的拖拽事件已经实现”交互归一”,对手写笔的支持正在开发中。

搜狗高速浏览器截图20240326151450.png

名称功能描述HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿
onDragStart绑定A组件,触控屏长按/鼠标左键按下后移动触发
onDragEnter绑定B组件,触控屏手指、鼠标移动进入B组件瞬间触发
onDragMove绑定B组件,触控屏手指、鼠标在B组件内移动触发
onDragLeave绑定B组件,触控屏手指、鼠标移动退出B组件瞬间触发
onDrop绑定B组件,在B组件内,触控屏手指抬起、鼠标左键松开时触发

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2295

    浏览量

    42641
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4349
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS开发:典型页面场景【一次开发多端部署】(功能开发

    应用开发至少包含两部分工作: UI页面开发和底层功能开发(部分需要联网的应用还会涉及服务端开发)。前面章节介绍了如何解决页面适配的问题,本章节主要介绍应用如何解决设备系统能力差异的兼容
    的头像 发表于 05-28 17:32 473次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】(交互

    对于不同类型的智能设备,用户可能有不同的交互方式,如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配,会增加开发工作量同时产生大量重复代码。为解决这问题,我们统
    的头像 发表于 05-27 14:16 359次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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><b class='flag-5'>归</b><b class='flag-5'>一</b>)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(设置典型页面)

    本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发多端部署的能力。
    的头像 发表于 05-27 09:36 1009次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】实战(设置典型页面)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(音乐专辑页2)

    本示例使用[一次开发多端部署]中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,保证应用在不同设备或不同窗口尺寸下可以正常显示。
    的头像 发表于 05-25 16:47 1972次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】实战(音乐专辑页2)

    鸿蒙OS开发:【一次开发多端部署】(视频应用)

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于一次
    的头像 发表于 05-25 16:29 4389次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(视频应用)

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑页面)

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面。
    的头像 发表于 05-25 16:21 647次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(音乐专辑页面)

    鸿蒙OS开发:【一次开发多端部署】应用(资源使用)

    在页面开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。
    的头像 发表于 05-21 15:43 906次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】应用(资源使用)

    鸿蒙OS开发:【一次开发多端部署】(多设备自适应能力)简单介绍

    本示例是《一次开发多端部署》的配套示例代码,展示了[页面开发多能力],包括自适应布局、响应
    的头像 发表于 05-21 14:59 2119次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(多设备自适应能力)简单介绍

    鸿蒙OS开发:【一次开发多端部署】( 设置app页面)

    本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发多端部署的能力。
    的头像 发表于 05-21 14:56 841次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】( 设置app页面)

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑主页)

    本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,保证应用在不同设备或不同窗口尺寸下可以正常显示。
    的头像 发表于 05-21 14:48 622次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(音乐专辑主页)

    鸿蒙OS开发:【一次开发多端部署】(多天气)项目

    本示例展示个天气应用界面,包括首页、城市管理、添加城市、更新时间弹窗,体现一次开发多端部署的能力。
    的头像 发表于 05-20 14:59 763次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>多天气)项目

    鸿蒙OS开发:【一次开发多端部署】(天气应用)案例

    本章通过个天气应用,介绍多应用的整体开发过程,包括UX设计、工程管理及调试、页面开发等。
    的头像 发表于 05-15 15:42 930次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(天气应用)案例

    鸿蒙OS开发:【一次开发多端部署】(简介)

    随着终端设备形态日益多样化,分布式技术逐渐打破单硬件边界,个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大
    的头像 发表于 05-14 15:20 1078次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</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>】(简介)

    HarmonyOS开发案例:【一次开发多端部署-音乐专辑】

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面。
    的头像 发表于 05-13 16:48 605次阅读
    HarmonyOS<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>-音乐专辑】

    HarmonyOS开发案例:【一次开发多端部署(视频应用)】

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于一次
    的头像 发表于 05-11 15:41 1227次阅读
    HarmonyOS<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>(视频应用)】