鸿蒙跨设备协同开发05——跨设备拖拽

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

1、概述

当用户拥有两台平板设备时，可以共享一套键鼠，通过跨设备拖拽，一步将设备A的素材拖拽到设备B快速创作，实现跨设备的协同工作体验。演示如下：

跨端拖拽提供跨设备的键鼠共享能力，支持在平板或2in1类型的任意两台设备之间拖拽文件、文本。

当前HarmonyOS系统应用中，文件管理器、浏览器支持拖出；备忘录支持拖入。用户可以体验以下场景：

• 将A设备文件管理器中的图片拖拽至B设备的备忘录应用。

• 将A设备备忘录中的文本拖拽至B设备的备忘录应用，并在B设备中使用A设备连接的键盘输入，协同操作。

【在开发跨设备拖拽的功能时，系统将自动完成键鼠穿越和跨设备的数据传递】

使用跨设备拖拽开发需要满足以下基本条件：

• 设备需要是：HarmonyOS NEXT Developer Preview0及以上版本的平板或2in1设备。

• 双端设备需要登录同一华为账号。

• 双端设备需要打开Wi-Fi和蓝牙开关，并接入同一个局域网。

• 打开键鼠穿越开关。

• 应用本身预置的资源文件（即应用在安装前的HAP包中已经存在的资源文件）不支持跨设备拖拽。

2、拖拽开发

ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应，开发者只需要将这些组件的draggable属性设置为true，即可使用默认拖拽能力。

• 默认支持拖出能力的组件（可从组件上拖出数据）：Search、TextInput、TextArea、RichEditor、Text、Image、Hyperlink。

• 默认支持拖入能力的组件（目标组件可响应拖入数据）：Search、TextInput、TextArea、Video。

其中Text、TextInput、TextArea、Hyperlink、Image和RichEditor组件的draggable属性默认为true。

我们也可以通过实现通用拖拽事件来自定义拖拽响应。

其他组件需要我们将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。

2.1 接口说明

整个拖拽过程涉及到的API总共有7个，分别是：

onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)onDragEnter(event: (event: DragEvent, extraParams?: string) => void)onDragMove(event: (event: DragEvent, extraParams?: string) => void)onDragLeave(event: (event: DragEvent, extraParams?: string) => void)onDrop(event: (event: DragEvent, extraParams?: string) => void)onDragEnd(event: (event: DragEvent, extraParams?: string) => void)onPreDrag(event: (preDragStatus: PreDragStatus) => void)

这7个API功能和作用分别介绍如下：

👉🏻 onDragStart

触发时机：第一次拖拽此事件绑定的组件时，长按时间 >= 500ms，然后手指移动距离 >= 10vp（如果长按触发时间 < 500ms，长按事件优先拖拽事件响应）

onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)

针对默认支持拖出能力的组件，如果我们设置了onDragStart，系统会优先执我们设置的onDragStart，并根据执行情况决定是否使用系统默认的拖出能力：

• • 如果开发者返回了自定义背板图，则不再使用系统默认的拖拽背板图；

  • 如果开发者设置了拖拽数据，则不再使用系统默认填充的拖拽数据。

【注意：文本类组件Text、Search、TextInput、TextArea、RichEditor对选中的文本内容进行拖拽时，不支持背板图的自定义】

onDragStart方法涉及到三个类：DragEvent、CustomBuilder、DragItemInfo。分别介绍如下：

⭐️ DragEvent表示拖拽事件，结构定义如下：​​​​​​​

class DragEvent {
  
  /* 功能描述：当拖拽结束时，是否使能并使用系统默认落位动效。应用可将该值设定为true来禁用系统默认落位动效，并实现自己的自定义落位动效。当不配置或设置为false时，系统默认落位动效生效，当松手位置的控件可接收拖拽的数据时，落位为缩小消失动效，若不可接收数据，则为放大消失动效。当未禁用系统默认落位动效情况下，应用不应再实现自定义动效，以避免动效上的冲突。*/+ useCustomDropAnimation: boolean;// 切换复制和剪贴模式的角标显示状态。+ dragBehavior: DragBehavior;// 还包含以下方法：setData(unifiedData: UnifiedData): void // 向DragEvent中设置拖拽相关数据。getData(): UnifiedData // 从DragEvent中获取拖拽相关数据。数据获取结果请参考错误码说明。getSummary(): Summary  // 从DragEvent中获取拖拽相关数据的简介。setResult(dragRect: DragResult): void // 向DragEvent中设置拖拽结果。getResult(): DragResult // 从DragEvent中获取拖拽结果。getPreviewRect(): Rectangle // 获取拖拽跟手图相对于当前窗口的位置，以及跟手图尺寸信息，单位VP，其中x和y代表跟手图左上角的窗