HarmonyOS 使用tab组件，列表对象如何动态更新内容。？

Question

使用tab组件，通过列表组件创建自定义tabBar，如何动态的更新列表tabbar的部分字段，普通对象可以动态更新，列表元素数据更新失败。

Answer 1

可以使用@ObservedV2和@Trace使得被装饰的类和属性具有深度观测的能力。

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-new-observedv2-and-trace-V5

builder函数传引用说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-two-way-sync-V5

示例demo如下：

import { promptAction } from '@kit.ArkUI';

@Entry
@ComponentV2
struct Index {
  temp:Tmp = new Tmp()
  aboutToAppear(): void {
    let cateItem: CataLogItems = new CataLogItems();
    cateItem.catalog = '全场换购'
    cateItem.catalogChangeNum = '0'
    cateItem.catalogLimitNum = 5
    cateItem.catalogIndex = '0'

    let cateItemTwo: CataLogItems = new CataLogItems();
    cateItemTwo.catalog = '全场6折'
    cateItemTwo.catalogChangeNum = '1'
    cateItemTwo.catalogLimitNum = 5
    cateItemTwo.catalogIndex = '1'

    this.temp.cateItem.catalog = '110'
    this.temp.cateList.push(cateItem)
    this.temp.cateList.push(cateItemTwo)
  }

  build() {
    Column() {
      // 真实场景
      Tabs({ barPosition: BarPosition.Start}){
        ForEach( this.temp.cateList, (item: CataLogItems, index: number) => {
          TabContent(){
            Column(){
              Text('商品列表').fontSize(20).margin({bottom: 20})
              Text(item.catalog).fontSize(20)
            }.width('100%').height('100%').onClick(()=>{
              item.catalog = 'xxxx'
              promptAction.showToast({message: '修改tab标题为:xxxx'});
            })
          }.backgroundColor('#3300ff00').onClick(()=>{
            this.temp.curIndex = index;
          })
          .tabBar(this.tabBuilder(item, '50%', index)).width('50%')
        })
      }.layoutWeight(1).onChange((index)=>{
        this.temp.curIndex = index;
      }).height(200)

      // 测试demo
      Column() {
        overBuilder(this.temp)
        Button('更新组件状态').onClick(() => {
          this.temp.subTitle = 'Hello World'
          this.temp.cateItem.catalog = '119'
          const data = this.temp.cateList[0]
          data.catalog = '119'
          this.temp.cateList[0] = data
        })
      }
    }
    .height('100%').width('100%')
    .padding({left: 16, right: 16})
    .justifyContent(FlexAlign.Center)
  }

  @Builder tabBuilder(item: CataLogItems, itemWidth: string|number, index: number) {
    Column() {
      Row() {
        Text(item.catalog).fontSize(15).height(20).margin({right: 3})
          .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(this.temp.curIndex == index ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(this.temp.curIndex == index ? '#09AFFF' : '#333333')
        Text(`(已选${item.catalogChangeNum}/${item.catalogLimitNum})`).fontSize(12).fontColor('#666666')
      }
      .justifyContent(FlexAlign.Center).height(20)

      Stack().width(30).height(3).borderRadius(1.5).backgroundColor('#09AFFF')
    }
    .width(itemWidth).height(30).alignItems(HorizontalAlign.Center)
    .padding({ left: 9, right: 9 })
  }
}

@ObservedV2
class Tmp {
  @Trace subTitle: string = 'Hello';
  @Trace cateItem: CataLogItems = new CataLogItems()
  @Trace cateList: CataLogItems[] = []
  @Trace curIndex: number = 0;
  @Trace currentCatalogIndex: string|undefined = '0';
}

@ObservedV2
export class CataLogItems {
  @Trace catalog?:string
  @Trace catalogChangeNum?:string
  @Trace catalogIndex?:string
  @Trace catalogLimitNum:number = 5
  @Trace pageNum:number = 1;
  @Trace pageSize:number = 20;
  @Trace totalNumber:number = 0;
  @Trace totalPage?:string
}

@Builder function overBuilder($$: Tmp) {
  Column() {
    Text(`(字符串: ${$$.subTitle})`).fontSize(16).fontColor('#666666').margin({bottom: 12})
    Text(`(对象: ${$$.cateItem.catalog})`).fontSize(16).fontColor('#666666').margin({bottom: 12})
    Text(`(数组元素： ${$$.cateList[0].catalog})`).fontSize(16).fontColor('#666666').margin({bottom: 12})
  }
}