HarmonyOS鸿蒙Next中list拖动item到其他item上方时，未松开手指下方item自动左移/右移并带动画，如何处理？
HarmonyOS鸿蒙Next中list拖动item到其他item上方时，未松开手指下方item自动左移/右移并带动画，如何处理？
- list拖动item，把item拖动到其他item上方，此时未松开手指，下方item自动左移/右移，带动画，如何处理？
4 回复
可以参考下：
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 })
}
.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
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到其他item上方时，未松开手指下方item自动左移/右移并带动画，如何处理？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，当拖动List中的item到其他item上方时，若未松开手指下方item自动左移或右移并带动画，可以通过以下方式处理：
-
监听拖拽事件：使用
OnDragListener监听item的拖拽事件，获取当前拖拽的位置和目标位置。 -
动态调整布局：在
onDrag回调中，根据拖拽位置动态调整List中item的布局，确保下方item不会自动移动。 -
控制动画效果：在拖拽过程中，手动控制
item的动画效果，避免系统默认的自动移动动画。 -
更新数据源：在拖拽结束后，更新
List的数据源，确保item位置变化后的数据一致性。 -
使用
ItemTouchHelper：通过ItemTouchHelper类实现item的拖拽和滑动操作，控制其动画行为。
通过这些步骤，可以避免在拖动item时下方item自动移动的问题。
在HarmonyOS鸿蒙Next中，要实现list item拖动时下方item自动左移/右移并带动画，可以通过以下步骤：
- 监听拖动事件：使用
onDragStart和onDragMove监听item的拖动。 - 计算位置：在
onDragMove中计算当前item的位置，并判断是否需要移动下方item。 - 动画效果：使用
animateTo或Transition实现item的平滑移动动画。 - 更新数据：在
onDragEnd中更新list数据，确保UI与数据同步。
示例代码：
onDragMove(event) {
const { index, offsetX } = event;
if (offsetX > 50) { // 示例条件
this.animateTo({ index: index + 1, offset: 100 }, { duration: 200 });
}
}
