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)