HarmonyOS 鸿蒙Next如何知道状态管理V2中数组对象中某个属性的改变

HarmonyOS 鸿蒙Next如何知道状态管理V2中数组对象中某个属性的改变 例如

@ObservedV2
export class NameIndexCallbackV2 {
  name: string = ''
  callback:(index:number) => void = (index:number) =>{}
  disable:boolean = false
  show:boolean = true
  constructor(name: string, callback:(index:number) => void) {
    this.name = name
    this.callback = callback
  }
}

@Local 
bottomToolbarArr: NameIndexCallback[] = []
我如果this.bottomToolbarArr[0].name = "test"这么赋值
那么ui怎么监听到数据的改变。我是写了一个组件，接收NameIndexCallback[] 对象作为入参

@ComponentV2
export struct BottomToolbar{
  @Param @Require arr:NameIndexCallbackV2[]

  @Local updateCount:number = 0

  build() {
    Column(){
      Row(){
        ForEach(this.arr, (item:NameIndexCallback, index) => {
          if(item.show){
            Row(){
              Text(item.name).layoutWeight(1).textAlign(TextAlign.Center).fontColor(item.disable ? '#800a59f7' : '#FF0A59F7').fontWeight(700)
              Divider().vertical(true).width(0.5).height(33).color('#FFF2F2F2')
            }.layoutWeight(1).onClick(()=>{
              if(!item.disable){
                item.callback(item.index)
                this.updateCount++
              }
            })
          }
        }, (item:NameIndexCallback) => JSON.stringify(item)+this.updateCount)
      }.backgroundColor(Color.White)
      .width('100%')
      .height(48)
      .borderRadius(8)
    }.padding({left:12,right:12,top:12,bottom:DefParam.bottomRectHeight}).visibility(this.arr.length > 0 ? Visibility.Visible : Visibility.None).flexShrink(0)

  }
}

更多关于HarmonyOS 鸿蒙Next如何知道状态管理V2中数组对象中某个属性的改变的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以使用@ObservedV2装饰器和@Trace装饰器装饰类以及类中的属性
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-new-observedv2-and-trace-V5#概述

更多关于HarmonyOS 鸿蒙Next如何知道状态管理V2中数组对象中某个属性的改变的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


给name 添加@Trace

在HarmonyOS鸿蒙Next中，状态管理V2（State Management V2）中数组对象某个属性的改变可以通过@Observed和@ObjectLink装饰器来实现。@Observed用于标记一个类为可观察类，@ObjectLink用于在组件中引用可观察对象的属性。当数组对象的某个属性发生变化时，使用@ObjectLink引用的组件会自动更新。

例如，定义一个可观察的数组对象类：

@Observed
class Item {
  id: number;
  name: string;

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

在组件中使用@ObjectLink引用数组对象的属性：

@Component
struct ItemView {
  @ObjectLink item: Item;

  build() {
    Text(this.item.name)
      .onClick(() => {
        this.item.name = "New Name";
      })
  }
}

在父组件中传递数组对象：

@Entry
@Component
struct ParentView {
  @State items: Item[] = [new Item(1, "Item1"), new Item(2, "Item2")];

  build() {
    Column() {
      ForEach(this.items, (item: Item) => {
        ItemView({ item: item })
      })
    }
  }
}

当Item对象的name属性发生变化时，ItemView组件会自动更新。

回到顶部