【拖拽专栏】OpenHarmony应用开发-统一拖拽
前言 在OpenHarmony应用开发中,拖拽是属于对标其他平台来说,比较亮眼的特性。其配合分布式、多窗口等特性可以实现特别的业务场景和效果,使用户在应用使用过程中更加的便捷。 概述 ArkUI框架默认对一些常用组件实现了其拖拽(拖入、拖出)的能力: 默认支持拖出能力的组件(可从组件上拖出数据):Search、TextInput、TextArea、RichEditor、Text、Image、Hyp
前言
在OpenHarmony应用开发中,拖拽是属于对标其他平台来说,比较亮眼的特性。其配合分布式、多窗口等特性可以实现特别的业务场景和效果,使用户在应用使用过程中更加的便捷。
概述
ArkUI框架默认对一些常用组件实现了其拖拽(拖入、拖出)的能力:
默认支持拖出能力的组件(可从组件上拖出数据):Search、TextInput、TextArea、RichEditor、Text、Image、Hyperlink
默认支持拖入能力的组件(目标组件可响应拖入数据):Search、TextInput、TextArea、RichEditor、Video
开发者只需要将这些组件的draggable属性设置为true,即可使用默认拖拽能力。其中,Text、TextInput、TextArea、Hyperlink、Image、RichEditor和Web组件的draggable属性默认为true。
当然,上述默认的拖拽能力只支持通用拖拽标准能力,比如从某个Image将图片拖拽到Web里时会默认显示Image里的图片资源。但是如果需要自定义拖拽响应(比如拖拽到Web里时,期望对图片做出一些处理,比如放大缩小、剪裁等),则需要实现通用拖拽事件。
类型
拖拽分为手势拖拽和鼠标拖拽,这两种方式在不同的设备类型上的操作流程也不同。手势拖拽一般需要稍微长按一段时间才会出现拖拽预览开启拖拽,而鼠标拖拽当鼠标点击到组件上时即可开始进行拖动操作。
API依赖
想实现拖拽能力,依赖ArkUI、网络、数据等多个维度的系统服务提供的API。比如:
ArkUI
draggable: 设置该组件是否允许进行拖拽。
allowDrop: 设置该组件上允许落入的数据类型。
onDragStart: 支持拖出的组件产生拖出动作时触发。
onDragEnter: 当拖拽活动的拖拽点进入组件范围内时触发,只有该组件监听了onDrop事件时,此回调才会被触发。
onDragMove: 拖拽点在组件范围内移动时触发;只有该组件监听了onDrop事件时,此回调才会被触发。
onDragLeave: 拖拽点离开组件范围时触发;只有该组件监听了onDrop事件时,此回调才会被触发。
onDrop: 当用户在组件范围内释放时触。
onDragEnd: 当用户释放拖拽时,拖拽活动结束,发起拖出动作的组件会触发该回调。
onPreDrag: 绑定此事件的组件,当触发拖拽发起前的不同阶段时,触发回调。
UDMF
@ohos.data.commonType: 数据通用类型是数据管理中通用的数据类型。
@ohos.data.unifiedDataChannel: 标准化数据通路为统一数据管理框架(Unified Data Management Framework,UDMF)的组成部分,针对多对多跨应用数据共享的不同业务场景提供了标准化的数据通路,提供了标准化的数据接入与读取接口。同时对文本、图片等数据类型提供了标准化定义,方便不同应用间进行数据交互,减少数据类型适配的工作量。
@ohos.data.uniformTypeDescriptor: 标准化数据定义与描述。
网络
@ohos.net.http: 提供HTTP数据请求能力。应用可以通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
@ohos.request: 提供上传下载文件、后台传输代理的基础能力。
业务场景
应用内拖拽
应用内拖拽指在某个独立应用内的业务之间进行拖拽操作。比如:
类笔记应用:打开多个笔记,将其中一个的信息拖拽到另外一个下。
类即时通讯应用:聊天转发图片时不需要再进行勾选转发操作,直接从一个会话拖到另一个即可。
应用间拖拽
应用间拖拽指在不同应用的业务通过拖拽进行数据传输。比如:
浏览器浏览网页时,有比较好的图文可以拖拽到网盘类或者笔记类应用里。
拍照后,查阅图库时,可以将好的图片拖拽到聊天类应用的回话框里发送给朋友。
设备间拖拽
设备间拖拽是在应用内拖拽和应用间拖拽的基础上,通过分布式数据对象能力,将拖拽后的数据传输到分布式设备上。场景本身属于上述两种的拓展。
最佳实践
本文为拖拽专栏总纲,拖拽示例较多,以链接方式引用:
场景 | 示例链接 |
---|---|
文字拖拽 | |
图片拖拽 | https://laval.csdn.net/673ee0b082931a478c21f5d6.html |
文件拖拽 | |
图文拖拽 | |
FAQ |
持续更新中...
更多推荐
所有评论(0)