HarmonyOS鸿蒙Next中使用Repeat实现列表, 数据添加删除,动画无法正常显示

HarmonyOS鸿蒙Next中使用Repeat实现列表, 数据添加删除,动画无法正常显示

class DataModel2 { id: number = -1; text: string = ‘’; type: string = typeA;

constructor(id: number, text: string, type: string) { this.id = id; this.text = text; this.type = type; } }

@Entry @ComponentV2 struct RepeatPage2 { indexA: string = ``; dragStartIndex: number = 0; @Local dataArr: Array<DataModel2> = []; // 数据源

aboutToAppear(): void { for (let i = 0; i < 20; i++) { this.dataArr.push(new DataModel2(i, ‘item_’ + i, type)); // 为数组添加一些数据 } }

build() { Column() { List() { Repeat<DataModel2>(this.dataArr) .virtualScroll({ totalCount: this.dataArr.length }) .key((item: DataModel2, index: number): string => { return item.id.toString() // 键值生成函数 }) .each((repeatItem: RepeatItem<DataModel2>) => { // 默认模板 ListItem() { ChildPage2({ dataModel: repeatItem.item, index: repeatItem.index, color: Color.Red }) }.transition(TransitionEffect.SLIDE.combine(TransitionEffect.scale({ x: 0.2, y: 0.2 }))) .animation({ duration: 1000 }) }) } .cachedCount(2) .height(‘70%’) .border({ width: 1 }) // 边框 TextInput({ placeholder: ‘输入数字’ }).width(‘50%’).height(40).margin(4) .onChange((value: string) => { this.indexA = value; }) Button(点击删除item).onClick(() => { animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => { const index = Number(this.indexA); if (index > -1 && index < this.dataArr.length) { this.dataArr.splice(index, 1); } }); }) Button(头部添加数据 value=${this.dataArr.length}) .onClick(() => { animateTo({ duration: 1000 }, () => { const spliceIndex = 0; const newData = this.dataArr.length; this.dataArr.splice(spliceIndex, 0, new DataModel2(newData, ‘item_’ + newData, typeA)); }); }) } } }

@ComponentV2 // 推荐使用V2装饰器 struct ChildPage2 { @Require @Param dataModel: DataModel2; //@Require标记的变量可以不赋值 @Require @Param index: number; @Require @Param color: ResourceColor;

build() { Text(this.dataModel.text + ’ index=’ + this.index).fontSize(30).fontColor(this.color) // 文本颜色为红色 } }

删除数据时,item是瞬间消失的,添加数据的动画是正常显示的