HarmonyOS实战:List拖拽位置交换的多种实现方式 原创

IT小码
发布于 2025-6-16 16:40
浏览
0收藏

背景

在最近日常工作中,遇到需要实现拖拽列表中的元素进行位置交换的需求。第一时间翻看了鸿蒙官方文档,发现官方只给Grid提供了Item交换位置的实现方式,然而List并没有提供,于是需要自己动手去实现。本篇文章详细介绍了两种不同的方式去实现List的位置交换。

技术实现

方式一

使用列表的手势事件实现位置交换。

  1. 先实现List的onItemDragStart方法。该方法表示拖拽列表元素时触发。
.onItemDragStart((event: ItemDragInfo, index: number) => { })

event:表示拖拽点坐标,index:表示当前位置元素的下标。

  1. 然后实现列表的onItemDrop方法,表示拖拽结束时回调。
.onItemDrop((event:ItemDragInfo,itemIndex:number,insertIndex:number,isSuccess:boolean)=>{ })

event:表示当前交换的位置坐标,itemIndex:表示拖拽前元素的下标,insertIndex:表示需要交换位置元素的下标,isSuccess:表示拖拽是否结束。

  1. <font style=“color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);”>为了实现更好的交互效果,在拖拽开始的地方也就是onItemDragStart方法里面,添加拖拽时元素显示的画面,作为返回值。</font>
Column() {
  Text(text.name)
    .fontSize(15)
    .backgroundColor(Color.Blue)
    .width("100%")
    .height(80)
    .borderRadius(10)
    .textAlign(TextAlign.Center)
}.padding(10)
  1. 最后在交换拖拽时,交换两个元素的位置即可,即在onItemDrop中实现。
if (!isSuccess || (itemIndex||insertIndex) >= this.arr.length) {
  return
}
let temp = this.list[itemIndex];
this.list[itemIndex] = this.list[insertIndex];
this.list[insertIndex] = temp;

首先需要判断拖拽手势是否结束,同时两个下标是否发生数组越界。条件满足后进行元素位置交换。注意list必须被@State或@Local修饰。

方式二

使用列表和元素共同实现元素交换。

  1. 首先实现元素的onDragStart方法,表示元素被开始拖拽。
.onDragStart((event: DragEvent, extraParams: string) => {
 
})

event:表示元素在屏幕上的坐标信息,extraParams:表示元素被选中时的下标。

  1. 接着实现列表的onDrop方法,表示列表被拖拽时触发。
.onDrop((event: DragEvent, extraParams: string) =>{
  
})

event:表示元素在屏幕上的坐标信息,extraParams:表示拖拽过程中列表元素的位置下标。

  1. 在onDragStart方法中使用局部变量保存拖拽前元素的下标。同时返回被拖拽元素的View,这里定义一个SwitchItemPosition类用来解析extraParams得到拖拽前元素的下标。
// extraParams :{"selectedIndex":5}
this.dragIndex = (JSON.parse(extraParams) as SwitchItemPosition).selectedIndex;
return this.pixelMapBuilder(this.listArr[this.dragIndex])
  1. 在onDrop方法中解析出元素被拖拽的最终位置,然后进行元素位置交换,注意判断数组越界。
let insertIndex: number = (JSON.parse(extraParams) as SwitchItemPosition).insertIndex; 
if (insertIndex >= this.list.length) {
  return;
}
let temp = this.list[itemIndex];
this.list[itemIndex] = this.list[insertIndex];
this.list[insertIndex] = temp;

总结

在实际的开发实现时,通过对列表元素的回调方法的研究与分析,不断的重复尝试,最终实现了列表元素的位置交换,当然目前的实现方案仍有瑕疵,缺少交互动画,

后续会对这些问题进行完善,看完文章,你学会了吗?

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
收藏
回复
举报
回复
    相关推荐