#打卡不停更# OpenHarmony-ArkUI(TS)声明式开发之列表拖动排列 原创 精华
作者:梁青松
项目介绍
本项目基于OpenHarmony的ArkUI框架:TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:基于TS扩展的声明式开发范式,因为OpenHarmony的API相对于HarmonyOS的API,功能上比较完善和成熟的,有些新的技术也早早接触到,所以本项目直接使用OpenHarmony SDK开发。
工具版本: DevEco Studio 3.0 Release
SDK版本: 3.1.7.7(API Version 8 Release)
效果演示
实现思路
先记录每个index对应的item的y轴坐标;使用属性方法:position() 来设置item的位置;再使用onTouch事件移动选中的item并完成与其他item的位置交换。
1. 页面布局
2. 记录y轴坐标并设置位置
新增三个变量
- mapOffsetY:存入每一个index对y轴位置
- moveIndex:移动的索引
- moveOffsetY:移动的y轴偏移量
使用onAreaChange方法记录index对应的y轴位置,使用position方法设置item的位置
3. 移动选中的item
3.1 zIndex(移动时浮在其他item之上)
3.2 backgroundColor(移动时改变移动中的item背景颜色)
3.3 onTouch(触摸事件,手指移动时,更改选中的item位置)
4. 位置交换
位置交换只是视觉上面的改变,列表的索引index还是从0到7,其实改变的是满足交换的两个item内容(列表中数据)主要的逻辑是在以下代码:向下拖动、向上拖动这一部分。
完整代码
在上面的代码的基础上加了属性动画animation,让位置交换看起来没有那么生硬。
总结
本项目的难点就是位置交换那块:index的顺序并没有改变,只是更改列表中的数据和移动的中索引。还有就是onAreaChange这个方法,如果没有设置方法position,在其方法内是能拿到每个item的y坐标,设置position后,y坐标是错误的,需要在onAreaChange计算一下item的y坐标,然后再更新页面。这样列表才能展示出来。
每天进步一点点、需要付出努力亿点点。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
拖动效果很流畅啊,这个用来存储便签之类的应该很方便
学习下position
感谢分享,学习了。
list自带的onItemDragStart和onItemDrop也能实现拖动效果
实际卡的不行啊 拖动的时候,在鸿蒙机器上