HarmonyOS 鸿蒙Next 列表控件是否同时支持列表项的自由排序和左右侧滑
HarmonyOS 鸿蒙Next 列表控件是否同时支持列表项的自由排序和左右侧滑
列表控件是否同时支持列表项的自由排序和左右侧滑
2 回复
您好,列表拖动实现列表重新排序请参考此demo:
1.首先通过实现一个列表
Column() {
ForEach(this.myCards, (item: string, index: number) => {
this.myCardItem(item, index)
}, (item: string) => item);
} 2.绑定组合手势,实现拖动单个Item实现顺序变动。
.gesture(GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: false })
.onAction((event) => {
console.log('===长按开始');
this.startEditMode(index);
})
.onActionCancel(() => {
console.log('===长按取消');
this.endEditMode();
})
.onActionEnd((event) => {
console.log('===长按结束');
this.endEditMode();
}),
PanGesture(this.panOption)
.onActionStart((event) => {
console.log('===拖动开始');
if (this.isEditMode) {
this.isMovedCard = true;
}
})
.onActionUpdate((event) => {
console.log('===拖动更新');
if (this.isEditMode) {
this.updatePosition(event.offsetY)
}
})
.onActionEnd(() => {
console.log('===拖动结束')
if (this.isEditMode) {
this.isMovedCard = false;
this.endEditMode();
}
})
))
复制
3.拖动开始和结束的相关代码:
startEditMode(index: number) {
if (this.isEditMode) {
return;
}
this.isEditMode = true;
this.indexSelected = index;
this.curPosStartY = this.itemHeight * this.indexSelected;
this.curPosY = this.curPosStartY;
// 1秒未滑动自动取消排序,因为不会回调"长按结束",也不会回调"滑动结束"。
setTimeout(() => {
if (!this.isMovedCard) {
this.endEditMode();
}
}, 1000)
}
endEditMode() {
this.isEditMode = false;
this.indexSelected = -1;
}
组合手势-手势处理-组件通用信息-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)
更多关于HarmonyOS 鸿蒙Next 列表控件是否同时支持列表项的自由排序和左右侧滑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


