HarmonyOS鸿蒙Next中实现list中item拖动位置、上下移动及动画过渡，点击删除按钮清除

HarmonyOS鸿蒙Next中实现list中item拖动位置、上下移动及动画过渡，点击删除按钮清除

  • list中的item拖动位置，上下移动，有动画过度，点击删除按钮删除
3 回复

可以参考下：

> import curves from '@ohos.curves';
> import Curves from '@ohos.curves'
> // xxx.ets
> @Entry
> @Component
> struct HPage {
> @State private 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: 15, initialIndex: 0 }) {
> ForEach(this.arr, (item: number) => {
> ListItem() {
> Text('' + item)
> .width(80)
> .height(80)
> .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 ? { x: this.offsetX } : { x: 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.offsetX = event.offsetX - 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.offsetX < 0) {
> value = curveValue.interpolate(-this.offsetX / this.ITEM_INTV)
> this.neighborItem = this.arr[index-1]
> this.neighborScale = 1 - value / 20;
> console.log('neighborScale:' + this.neighborScale.toString())
> } else if (this.offsetX > 0) {
> value = curveValue.interpolate(this.offsetX / this.ITEM_INTV)
> this.neighborItem = this.arr[index+1]
> this.neighborScale = 1 - value / 20;
> }
> //根据位移交换排序
> if (this.offsetX > this.ITEM_INTV / 2) {
> animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
> this.offsetX -= this.ITEM_INTV
> this.dragRefOffset += this.ITEM_INTV
> this.itemMove(index, index + 1)
> })
> } else if (this.offsetX < -this.ITEM_INTV / 2) {
> animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
> this.offsetX += 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())
> }
> .listDirection(Axis.Horizontal)
> }
> .width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
> }
> }

更多关于HarmonyOS鸿蒙Next中实现list中item拖动位置、上下移动及动画过渡，点击删除按钮清除的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现list中item的拖动位置、上下移动及动画过渡，点击删除按钮清除，可以采用以下方法：

  1. 拖动位置：使用ListContainer组件，并为其设置onItemDragStart、onItemDragEnter、onItemDragMove和onItemDragEnd事件监听器。通过这些事件，可以捕获item的拖动开始、进入、移动和结束的状态，并更新list中item的位置。

  2. 上下移动：在onItemDragMove事件中，通过计算item的拖动距离，判断是否需要上下移动item的位置。可以使用ListContainer的swapItems方法交换item的位置。

  3. 动画过渡：使用Animator框架为item的移动添加动画效果。可以在onItemDragMove和swapItems方法中，为item的位置变化添加平滑的过渡动画。

  4. 点击删除按钮清除：为每个item的删除按钮设置onClick事件监听器。在事件处理函数中，使用ListContainer的removeItem方法移除对应的item，并更新list的显示。

示例代码片段：

listContainer.onItemDragStart((event) => {
    // 记录拖动的item
});

listContainer.onItemDragEnter((event) => {
    // 处理item进入新位置
});

listContainer.onItemDragMove((event) => {
    // 计算并移动item位置
    listContainer.swapItems(oldIndex, newIndex);
    // 添加动画过渡
});

listContainer.onItemDragEnd((event) => {
    // 结束拖动
});

deleteButton.onClick(() => {
    listContainer.removeItem(itemIndex);
});

通过以上方法，可以在HarmonyOS鸿蒙Next中实现list中item的拖动、上下移动、动画过渡及删除功能。

在HarmonyOS鸿蒙Next中，可以通过ListContainer和ItemComponent实现列表项的拖动、上下移动及动画过渡。首先，使用ListContainer的setDraggable(true)启用拖动功能。通过ItemComponent的onDragStart和onDragEnd方法处理拖动事件，结合LayoutAnimator实现动画过渡。上下移动可通过ItemComponent的onMoveUp和onMoveDown方法实现。点击删除按钮时，调用ItemComponent的removeItem方法清除指定项，并通过LayoutAnimator添加删除动画。

回到顶部