HarmonyOS NEXT应用开发—Grid和List内拖拽交换子组件位置

介绍

本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换。

效果图预览

使用说明:

  1. 拖拽Grid中子组件,到目标Grid子组件位置,进行两者位置互换。
  2. 拖拽List中子组件,到目标List子组件位置,进行两者位置互换。

实现思路

  1. 在Grid组件中,通过editMode()打开编辑模式、通过onItemDragStart()指定拖拽时样式、通过onItemDrop()指定拖拽释放时的行为。源码参考[https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragandexchange/src/main/ets/view/GridSceneView.ets)。

    Grid() { ... }
    .editMode(true) // 设置Grid进入编辑模式
    .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // 设置拖拽过程中显示的图形
    this.movedItem = this.appInfoList[itemIndex]; // 记录原位置子组件信息
    return this.itemWhileDrag();
    })
    .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // 拖拽释放时,触发回调
    // isSuccess=false时,说明drop的位置在grid外部;insertIndex > length时,说明有新增元素的事件发生
    if (isSuccess && insertIndex < this.appInfoList.length) {
    this.changeIndex(itemIndex, insertIndex); // 互换子组件index值
    }
    })

  2. 在List组件中,通过ListItem的onDragStart()方法指定拖拽开始时的行为,通过List的onTouch()指定拖拽释放时的行为。源码参考ListSceneView.ets

    List({ space: LIST_SPACE }) {
    ForEach(this.appInfoList, (item: AppInfo, index) => {
    ListItem() { ... }
    .onDragStart(() => {
    item.visible = false; // 拖拽时,设置子组件原位置图标不可见
    })
    .onTouch((event: TouchEvent) => { // 拖拽释放时,记录目标位置子组件index值
    if (event.type === TouchType.Down) {
    this.dragIndex = index;
    }
    })
    })
    }
    .onDrop((event: DragEvent, extraParams: string) => {
    let jsonString: JsonObjType = JSON.parse(extraParams) as JsonObjType; // 通过参数extraParams获取原位置子组件index值
    this.changeIndex(this.dragIndex, jsonString.insertIndex); // 互换子组件index值
    this.appInfoList[jsonString.insertIndex].visible = true; // 完成互换后,设置子组件原位置图标不可见
    })

高性能知识点

不涉及

模块依赖

@ohos/routermodule(动态路由)

工程结构&模块类型

复制代码
dragandexchange                  // har类型               
|---pages                                       
|---|---Launcher.ets             // 页面层-方案主页面
|---view                                        
|---|---GridSceneView.ets        // 视图层-Grid拖拽页面             
|---|---ListSceneView.ets        // 视图层-List拖拽页面  
|---model                                     
|---|---AppInfo.ets              // 模型层-App信息模型  

参考资料

  1. 创建网格(Grid/GridItem)
  2. List

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

相关推荐
独行soc9 小时前
#渗透测试#批量漏洞挖掘#HSC Mailinspector 任意文件读取漏洞(CVE-2024-34470)
linux·科技·安全·网络安全·面试·渗透测试
coder_pig10 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶10 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
小飞悟10 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
二二孚日11 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为
掘金安东尼12 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
前端世界12 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
天天扭码12 小时前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
阳火锅12 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
Jalor13 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos