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

背景

在最近日常工作中，遇到需要实现拖拽列表中的元素进行位置交换的需求。第一时间翻看了鸿蒙官方文档，发现官方只给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. 为了实现更好的交互效果，在拖拽开始的地方也就是onItemDragStart方法里面，添加拖拽时元素显示的画面，作为返回值。

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;

总结

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

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