如何实现如下场景:对列表的列表项进行拖动时,其他列表项自动补位和动态排列的效果

如何实现如下场景:对列表的列表项进行拖动时,其他列表项自动补位和动态排列的效果

HarmonyOS
2024-03-17 14:54:44
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
savage01

1.为列表或宫格项(item)添加拖拽能力,使能 draggable,并注册onDragStart。

2.在 onDragStart 回调中将所拖条目设置visibility为 HIDDEN 状态。

2.在列表或宫格项(item)上注册 onDragMove 监听拖起的移动事件。

3.拖动过程中,通过 onDragMove 的 event 参数获取到拖拽跟手点坐标。

4.计算跟手点坐标与item中线的距离关系,当重合时,启动挤位动效。

5.Item布局信息可通过 componentUtils API获取到。

6.挤位动效通过animateTo来改变datasource里的index,触发list的排序动效。

7.落位动效可通过自定义动效完成。

分享
微博
QQ
微信
回复
2024-03-18 20:33:35
相关问题
拖动实现列表重新排序
368浏览 • 1回复 待解决
视频列表不规则排列
374浏览 • 1回复 待解决
如何实现列表单选效果
1093浏览 • 0回复 待解决
页面列表嵌套滚动,实现列表吸顶
533浏览 • 1回复 待解决
如何实现分组列表吸顶/吸底效果
976浏览 • 1回复 待解决
分组列表实践(嵌套列表
521浏览 • 1回复 待解决
如何设置分组列表圆角间距
807浏览 • 1回复 待解决
键盘拉起列表无法上下滑动
858浏览 • 1回复 待解决
关于获取应用列表权限问题?
2186浏览 • 1回复 待解决
列表滑动鸿蒙推荐ux设计
776浏览 • 1回复 待解决
编写一个页面,实现不规则列表
389浏览 • 1回复 待解决