HarmonyOS鸿蒙Next中装饰器-@Observed@ObjectLink

HarmonyOS鸿蒙Next中装饰器-@Observed@ObjectLink

背景

加深对@Observed@ObjectLink 装饰器使用的理解,以小故事做注释

效果

image.png

代码

/**
 * 这是一个故事
 *
 * Boss为了交付两个完全一样的客户项目【只要写1万行代码】,在公司内部,把一个程序员配给了项目经理,让其监督写代码
 *
 * 项目经理领到指示后, 先告知客户一,公司为其配了专职程序员,由其随时发号施令让其敲代码,然后又以同样的话术告知客户二
 *
 * 接下来的事情,客户一和客户二,他们都非常满意,因为每一天,虽然他们各自只督促程序员写了一行代码,但每天下班时,
 * 客户们都能看到两行代码,呵呵。
 *
 * Boss听闻此事,甚是开心,遂告知项目经理,也要在每天中督促一次程序员,果不其然,程序员竟然每天可以写三行代码了,
 * 对此老板深思了一会......, 做了一个决定,将项目中的程序直接换掉, 仅留当前的项目经理.
 * later,客户发现之前写的代码没了,哭天骂娘
 *
 * 神明英武的Boss一气之下,为客户们重新配了新的项目经理和新的程序员
 *
 */

@Entry
@Component
struct Boss{
  @State projectManager: ProjectManager = new ProjectManager(new Programmer(0, '小哥1'), '项管1');

  build(){
    Column({space: 50}){
      Customer({ label: '客户一', programmer: this.projectManager.programmer })
      Customer({ label: '客户二', programmer: this.projectManager.programmer })

      Button(`this.projectManager.programmer.codelines+= 1`)
        .onClick(() => {
          //Boss告知项目经理督促程序员写代码
          this.projectManager.programmer.codelines += 1;
        })

      Button(`this.projectManager.programmer = new Programmer(0)`)
        .onClick(() => {
          //换程序员
          this.projectManager.programmer = new Programmer(0, '小哥2');
        })

      Button(`this.projectManager = new ProjectManager(Programmer(0))`)
        .onClick(() => {
          //换项目经理,换程序员
          this.projectManager = new ProjectManager(new Programmer(0, '小哥3'), '项管2');
        })

    }
    .width('100%')
    .height('100%')
    .padding({top: px2vp(111)})
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Pink)
  }
}

[@Observed](/user/Observed)
class Programmer {
  public name: string
  public codelines: number = 1;

  constructor(c: number, d: string) {
    this.codelines = c;
    this.name = d;
  }
}

class ProjectManager {
  public name: string
  public programmer: Programmer;

  constructor(a: Programmer, b: string) {
    this.programmer = a;
    this.name = b;
  }
}

@Component
struct Customer {
  label: string = 'customer';
  [@ObjectLink](/user/ObjectLink) programmer: Programmer;

  build() {
    Row() {
      Button(`[${this.label}] 让 ${this.programmer.name} 写代码 = ${this.programmer.codelines}`)
        .onClick(() => {
            this.programmer.codelines += 1;
        })
    }.backgroundColor(Color.Green).padding('16vp')
  }
}


更多关于HarmonyOS鸿蒙Next中装饰器-@Observed@ObjectLink的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

class Programmer class ProjectManager

这两个类只能组件内部类么,如果放在另外的文件里,怎么用?我试了@Observed 这个关键字找不到。

更多关于HarmonyOS鸿蒙Next中装饰器-@Observed@ObjectLink的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


文件后缀名都用ets结尾

多谢,刚明白,

楼主,子组件修改后,父组件不会更新,官网不是说双向?

不知是不是没理解到位,我认识到@Observed/@ObjectLink也是希望父子组件可以双向通信的,但是示例代码坐下来子组件状态是不能同步回父组件的,哎!!!,

有时候没有ObjectLink的情况下,Observed也能发挥作用,没明白为什么,

在HarmonyOS鸿蒙Next中,@Observed@ObjectLink是用于实现数据响应式编程的装饰器。@Observed用于标记一个类,表示该类的实例可以被观察,通常用于管理状态数据。@ObjectLink用于标记一个属性,表示该属性与一个被@Observed标记的实例关联,当被观察的实例发生变化时,该属性会自动更新。这两个装饰器的结合使用,可以简化UI与数据之间的绑定,提升开发效率。

回到顶部