HarmonyOS鸿蒙Next中是否有list listitem拖拽相关的代码demo？

HarmonyOS鸿蒙Next中是否有list listitem拖拽相关的代码demo？

list的ListItem设置了拖拽事件 但是在 `.onDragMove((event: DragEvent, extraParams: string) => { console.info('List onDragMove, ' + extraParams) })` extraParams 返回的数据都是空值 没有相应的index值
2 回复

import curves from ‘@ohos.curves’ import Curves from ‘@ohos.curves’ // xxx.ets

@Entry @Component struct ListDemo { @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] @State dragItem: number = -1 @State scaleItem: number = -1 @State neighborItem: number = -1 @State neighborScale: number = -1 private dragRefOffset: number = 0 @State offsetX: number = 0 @State offsetY: number = 0 private ITEM_INTV: number = 120

scaleSelect(item: number): number { if (this.scaleItem == item) { return 1.05 } else if (this.neighborItem == item) { return this.neighborScale } else { return 1 } }

itemMove(index: number, newIndex: number): void { let tmp = this.arr.splice(index, 1) this.arr.splice(newIndex, 0, tmp[0]) }

build() { Stack() { List({ space: 20, initialIndex: 0 }) { ForEach(this.arr, (item: number) => { ListItem() { Text(’’ + item) .width(‘100%’) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) .shadow(this.scaleItem == item ? { radius: 70, color: ‘#15000000’, offsetX: 0, offsetY: 0 } : { radius: 0, color: ‘#15000000’, offsetX: 0, offsetY: 0 }) .animation({ curve: Curve.Sharp, duration: 300 }) } .margin({ left: 12, right: 12 }) .scale({ x: this.scaleSelect(item), y: this.scaleSelect(item) }) .zIndex(this.dragItem == item ? 1 : 0) .translate(this.dragItem == item ? { y: this.offsetY } : { y: 0 }) .gesture( // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) .onAction((event?: GestureEvent) => { animateTo({ curve: Curve.Friction, duration: 300 }, () => { this.scaleItem = item }) }) .onActionEnd(() => { animateTo({ curve: Curve.Friction, duration: 300 }, () => { this.scaleItem = -1 }) }), PanGesture({ fingers: 1, direction: null, distance: 0 }) .onActionStart(() => { this.dragItem = item this.dragRefOffset = 0 }) .onActionUpdate((event: GestureEvent) => { this.offsetY = event.offsetY - this.dragRefOffset // console.log(‘Y:’ + this.offsetY.toString()) this.neighborItem = -1 let index = this.arr.indexOf(item) let curveValue = Curves.initCurve(Curve.Sharp) let value: number = 0 //根据位移计算相邻项的缩放 if (this.offsetY < 0) { value = curveValue.interpolate(-this.offsetY / this.ITEM_INTV) this.neighborItem = this.arr[index-1] this.neighborScale = 1 - value / 20; console.log(‘neighborScale:’ + this.neighborScale.toString()) } else if (this.offsetY > 0) { value = curveValue.interpolate(this.offsetY / this.ITEM_INTV) this.neighborItem = this.arr[index+1] this.neighborScale = 1 - value / 20; } //根据位移交换排序 if (this.offsetY > this.ITEM_INTV / 2) { animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { this.offsetY -= this.ITEM_INTV this.dragRefOffset += this.ITEM_INTV this.itemMove(index, index + 1) }) } else if ( this.offsetY < -this.ITEM_INTV / 2) { animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { this.offsetY += this.ITEM_INTV this.dragRefOffset -= this.ITEM_INTV this.itemMove(index, index - 1) }) } }) .onActionEnd((event: GestureEvent) => { animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { this.dragItem = -1 this.neighborItem = -1 }) animateTo({ curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150 }, () => { this.scaleItem = -1 }) })) .onCancel(() => { animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { this.dragItem = -1 this.neighborItem = -1 }) animateTo({ curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150 }, () => { this.scaleItem = -1 }) })) }, (item: number) => item.toString()) } } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) .padding({ top: 5 }) } }

List不支持onDragMove事件，List有自己的拖拽事件onItemDragMove和onItemDrop，Demo如下

@Entry @Component struct ListExample { @State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19] @State dragItem: number = -1

// 拖动的元素，注意不是index @Builder dragFloatView(item: number) { Column() { Text(’’ + item) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(Color.White) .fontSize(16) .width(‘100%’) .height(100) } }

build() { Column() { List({ space: 10 }) { ForEach(this.arr, (item: number) => { ListItem() { Text(’’ + item) .width(‘100%’) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } .visibility(item == this.dragItem ? Visibility.Hidden : Visibility.Visible) .id(item.toString()) }, (item: string) => item) } .listDirection(Axis.Vertical) .width(‘100%’) .onItemMove((from: number, to: number) => { return true }) .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // 开始拖拽列表元素时触发。 this.dragItem = this.arr[itemIndex] return this.dragFloatView(this.arr[itemIndex]) }) .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { // 拖拽在列表元素范围内移动时触发。 animateTo({ duration: 200, curve: Curve.Linear }, () => { let deleteIndex = this.arr.indexOf(Number(this.dragItem)) this.arr.splice(deleteIndex, 1) this.arr.splice(insertIndex, 0, Number(this.dragItem)) }) }) .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发。 this.dragItem = -1 }) } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) } }

更多关于HarmonyOS鸿蒙Next中是否有list listitem拖拽相关的代码demo？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，确实支持列表项的拖拽操作。相关的代码实现可以通过ListContainer和ListItem组件来完成。具体实现步骤包括：

  1. 初始化ListContainer：创建一个ListContainer对象，并设置其适配器。适配器负责提供列表项的数据和视图。

  2. 实现拖拽逻辑：通过OnItemDragListener接口来监听列表项的拖拽事件。你可以在这个接口中实现onItemDragStart、onItemDragEnter、onItemDragMove、onItemDragExit和onItemDragEnd等方法，以处理拖拽过程中的各种状态。

  3. 处理拖拽数据：在onItemDragStart方法中，你可以获取被拖拽的列表项的数据，并在onItemDragEnd方法中处理拖拽结束后的数据更新。

  4. 更新UI：在拖拽过程中，可以通过ListContainer的notifyDataChanged方法来刷新列表的UI，以反映拖拽后的数据变化。

以下是一个简单的代码示例：

import { ListContainer, ListItem, OnItemDragListener } from '@ohos.agp.components';

class MyOnItemDragListener implements OnItemDragListener {
    onItemDragStart(item: ListItem): void {
        // 处理拖拽开始
    }

    onItemDragEnter(item: ListItem): void {
        // 处理拖拽进入
    }

    onItemDragMove(item: ListItem): void {
        // 处理拖拽移动
    }

    onItemDragExit(item: ListItem): void {
        // 处理拖拽退出
    }

    onItemDragEnd(item: ListItem): void {
        // 处理拖拽结束
    }
}

let listContainer = new ListContainer(context);
listContainer.setAdapter(adapter);
listContainer.setOnItemDragListener(new MyOnItemDragListener());

这段代码展示了如何在HarmonyOS鸿蒙Next中实现列表项的拖拽操作。具体的实现细节可以根据实际需求进行调整。

回到顶部