HarmonyOS鸿蒙Next中Repeat新增item后导致列表界面的Item重复的问题

HarmonyOS鸿蒙Next中Repeat新增item后导致列表界面的Item重复的问题

这个是数据项类型：

@ObservedV2
export class ItemDataV2 {

  @Trace
  id: number;

  @Trace
  type:string = '';

  @Trace
  title: ResourceStr;

  @Trace
  img: Resource;

  constructor(id: number, title: ResourceStr, img: Resource, type?:string) {
    this.id = id;
    this.title = title;
    this.img = img;
    if(type){
      this.type = type
    }
  }
}

这个是列表：

@ComponentV2
export struct RepeatDemo {
  @Local imageList: Array<ItemDataV2> = this.getFirstPageData()

 //模拟的第一页的数据
  getFirstPageData(): Array<ItemDataV2> {
    let imageList: Array<ItemDataV2> = []
    //第一项轮播
    imageList.push(new ItemDataV2(0, $r('app.string.empty'), $r('app.media.empty'), 'Swiper'))
    //第二项grid
    imageList.push(new ItemDataV2(1, $r('app.string.empty'), $r('app.media.empty'), 'Grid'))
    imageList.push(...getItemData(2, 10))
    return imageList
  }

  build() {
    Column() {
      Button('addItem').onClick(() => { //点击按钮添加一页的数据
        this.addTestData()
      })

      List({ space: 10 }) {
        Repeat<ItemDataV2>(this.imageList)
          .each((ri: RepeatItem<ItemDataV2>) => {
            ListItem() {
              this.imageItemView(ri.item)
            }
            .opacity(printItem(ri))//打印item
          })
          .key((item: ItemDataV2) => item.id.toString())
          .templateId((item: ItemDataV2) => {
            return item.type
          })
          .template('Swiper', (_: RepeatItem<ItemDataV2>) => {
            ListItem() {
              this.ListSwiperHeader()//轮播
            }
          }, { cachedCount: 1 })
          .template('Grid', (_: RepeatItem<ItemDataV2>) => {
            ListItem() {
              this.ListGridHeader()//网格
            }
          }, { cachedCount: 1 })
          .virtualScroll({ totalCount: this.imageList.length })
      }
      .cachedCount(6)
      .width('100%')
      .padding(15)
    }
  }

  //添加一页的数据
  addTestData(): void {
    let count = this.imageList.length
    Logger.warn(`loadMoreData count = ${count}`)
    let moreArr: ItemDataV2[] = getItemData(count, 10)
    this.imageList.push(...moreArr)
  }

  [@Builder](/user/Builder)
  imageItemView(item: ItemDataV2) {
    Stack() {
      Image(item.img)
        .objectFit(ImageFit.Cover)
        .aspectRatio(3)
        .borderRadius(12)

      Text(item.title)
        .padding(15)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)

    }.alignContent(Alignment.TopStart)
    .width('100%')
    .opacity(printItem(item))//[@Builder](/user/Builder) 里面打印item
  }
}

这个是用于模拟的数据：

//打印数据
function printItem(o: object): number {
  Logger.warn(`printItem ${JSON.stringify(o).replaceAll('"__ob_', '"')}`)
  return 1
}

let swiperImg: Array<Resource> =
  [$r('app.media.fig1'), $r('app.media.fig2'), $r('app.media.fig3'), $r('app.media.fig4')]
//创建模拟的数据
function getItemData(start: number, count: number): ItemDataV2[] {
  let arr: ItemDataV2[] = []
  for (let i = 0; i < count; i++) {
    let imageIndex = i % swiperImg.length
    arr.push(new ItemDataV2(i + start, (i + start).toString(), swiperImg[imageIndex]))
  }
  return arr
}

结果发现点击按钮多添加几页的数据后，滑动到第三页的数据就开始重复了：

在@Builder里面加了打印发现： 滑动超过2页后，@Builder里面就没有打印了，后面的item就都没有渲染了，感觉是这个list一直在复用前面这20个item 然后在ListItem() { this.imageItemView(ri.item) } .opacity(printItem(ri))加了打印，结果发现滑倒后面后这里的item全部打印了，然而@Builder里面只打印了前面20个的item。

之前用V1状态修饰符和lazyForeach没碰到这个问题，后面替换成V2的和Repeat就出问题了，这到底是什么原因？