HarmonyOS鸿蒙Next中@Observed解决多层对象嵌套UI更新问题【曲线救国用法】

HarmonyOS鸿蒙Next中@Observed解决多层对象嵌套UI更新问题【曲线救国用法】

class Item {
  label: string
  value: string

  constructor(label: string) {
    this.label = label
    this.value = label
  }
}

class Product {
  list: Array<Item>

  constructor(list: Array<Item>) {
    this.list = list
  }
}

[@Observed](/user/Observed)
class BaseObserve {
  ___hide: boolean //用于触发UI更新字段

  // UI界面调用才有效
  update(call: Function, forceUpdate?: boolean) {
    call()
    if (forceUpdate) {
      this.___hide = !this.___hide
    }
  }
}

class Avr extends BaseObserve {
  product: Product //嵌套对象可以不用[@Observed](/user/Observed)

  constructor(product: Product) {
    super()
    this.product = product
  }
}

@Entry
@Component
struct Index {
  @Provide("avrObj") avr: Avr = new Avr(new Product([new Item("Item1"), new Item("Item2")]))

  build() {
    Column({ space: 20 }) {
      ForEach(this.avr.product.list, (item) => {
        Row() {
          Button(`K:${item.label} - V:${item.value}`)
            .onClick(() => {
              this.avr.update(() => {
                item.value = Date.now().toString()
              }, true)
            })
        }
      })
    }
    .height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Center)
  }
}