HarmonyOS 鸿蒙Next List组件ForEach中无法正确删除元素
HarmonyOS 鸿蒙Next List组件ForEach中无法正确删除元素
操作步骤：
key不能用index，换成item就好了
更多关于HarmonyOS 鸿蒙Next List组件ForEach中无法正确删除元素的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
| 字段名 | 数据类型 | 长度 | 是否必填 | 描述 |
|---|---|---|---|---|
| id | int | 11 | 是 | 用户ID |
| name | varchar | 255 | 是 | 姓名 |
| created_at | datetime | 是 | 创建时间 | |
| updated_at | datetime | 否 | 更新时间 |
class BasicDataSource implements IDataSource { private listeners: DataChangeListener[] = []; private originDataArray: string[] = [];
public totalCount(): number { return 0; }
public getData(index: number): string { return this.originDataArray[index]; }
registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { console.info(‘add listener’); this.listeners.push(listener); } }
unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { console.info(‘remove listener’); this.listeners.splice(pos, 1); } }
notifyDataReload(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }) }
notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); }) }
notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); }) }
notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); }) }
notifyDataMove(from: number, to: number): void { this.listeners.forEach(listener => { listener.onDataMove(from, to); }) } }
class MyDataSource extends BasicDataSource { dataArray: string[] = [];
public totalCount(): number { return this.dataArray.length; }
public getData(index: number): string { return this.dataArray[index]; }
public addData(index: number, data: string): void { this.dataArray.splice(index, 0, data); this.notifyDataAdd(index); }
// 在数据尾部增加一个元素 public AddLastItem(): void { this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length.toString()) this.notifyDataAdd(this.dataArray.length - 1) }
public pushData(data: string): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); }
public deleteData(index: number): void { this.dataArray.splice(index, 1); this.notifyDataDelete(index); } }
@Entry @Component struct ListEdit { private data: MyDataSource = new MyDataSource(); @State transitionTime: TransitionEffect = (TransitionEffect.IDENTITY)
setDeleteAnimation() { this.transitionTime = (TransitionEffect.opacity(0) .animation({ duration: 300, })).combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END), TransitionEffect.move(TransitionEdge.START))) }
setAddAnimation() { this.transitionTime = (TransitionEffect.opacity(0) .animation({ duration: 300, delay:500 })).combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END), TransitionEffect.move(TransitionEdge.START))) }
aboutToAppear() {
for (let i = 0; i <= 20; i++) {
this.data.pushData(${i})
}
}
@State index2: number = 100
build() { List({ space: 3 }) { LazyForEach(this.data, (item: string, index: number) => { ListItem() { Row() { Text(item) .fontSize(50) .width(‘70%’) .height(80) .fontSize(20) .textAlign(TextAlign.Center) .borderRadius(10) .border({ width: 1 }) Button(‘del’) .onClick(() => { this.setDeleteAnimation() animateTo({ duration: 800,delay:300, curve: Curve.Linear,onFinish: () => { this.transitionTime=(TransitionEffect.IDENTITY) //动画结束时设置禁止转场 } }, () => { this.data.deleteData(this.data.dataArray.indexOf(item)) }) }) Button(‘add’) .onClick(() => { this.setAddAnimation() // 点击添加数据 this.index2 = this.index2 + 1 animateTo({ duration: 500, curve: Curve.Smooth,onFinish: () => { this.transitionTime=(TransitionEffect.IDENTITY) } }, () => { this.data.addData(0, “new Data” + this.index2) }) }) } .margin({ left: 10, right: 10 }) } .transition( this.transitionTime) .swipeAction({ end: { onAction: () => { this.setDeleteAnimation() animateTo({ duration: 1000 }, () => { this.data.deleteData(this.data.dataArray.indexOf(item)) }) }, actionAreaDistance: 56, onEnterActionArea: () => {}, onExitActionArea: () => {} } }) .onAppear(() => { console.info(‘cbl’ + item) // 即将触底时提前增加数据 if (item + 1 == this.data.totalCount().toString()) { for (let i = 0; i < 10; i++) { this.data.AddLastItem() } } }) }, (item: string) => item) }.cachedCount(5) } }
