HarmonyOS LazyForEach中修改数据源未刷新UI？

Question

使用LazyForEach绑定了数据源，并且此数据源有@State修饰，修改数据源中的字段，没有触发页面刷新。

Answer 1

请参看文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-lazyforeach-V5\#objectlink属性变化ui未更新

以下是示例代码

@Observed
export default class LazyDataSource<T> extends BasicDataSource<T> {
  ...
  public reloadData(): void {
    this.notifyDataReload();
  }

  public clear(): void {
    this.dataArray.splice(0, this.dataArray?.length)
  }

  public isEmpty(): boolean {
    return this.dataArray.length === 0;
  }
}

//index.ets
@Component
struct ChildComponent {
  @ObjectLink data: Bean
  build() {
    Column() {
      Text('1').padding(20)
      if (!this.data.fold) {
        Text('2')
      }
      Divider().color(Color.Black)
    }
  }
}

@Entry
@Component
struct Index {
  @State list: LazyDataSource<Bean> = new LazyDataSource()


  build() {
    Column() {
      LazyForEach(this.list, (item: Bean,index:number)=>{
        ListItem() {
          ChildComponent({data:item}).width('100%')
            .onClick(()=>{
              item.fold = !item.fold
              let ben  = new Bean(item.fold)
              this.list.changeData(index,ben);
              this.list.reloadData()
              console.log('list:', `${this.list.getData(0).fold} ${this.list.getData(1).fold} ${this.list.getData(2).fold}`)
            })
        }.width('100%')
      })

    }
    .width('100%')
    .height('100%')
  }
}

@Observed
export class Bean {
  fold: boolean
  constructor(fold: boolean) {
    this.fold = fold;
  }