鸿蒙ArkTS/ArkUI实战-装饰器@State、@Observed和@ObjectLink

@State装饰器：组件内状态

@State状态数据具有以下特征：

• 1、支持多种类型：允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组，即Array、Array、Array、Array。不允许object和any。
• 2、支持多实例：组件不同实例的内部状态数据独立。
• 3、内部私有：标记为@State的属性是私有变量，只能在组件内访问。
• 4、需要本地初始化：必须为所有@State变量分配初始值，将变量保持未初始化可能导致框架行为未定义。
• 5、 创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态属性的初始值。

@State向@Link传参时，用**$**引用@State父组件变量的值，如：

登录后复制

ComponentA({ highScore: $highScore })

• 1.

@State向@Prop传参时，用**this.**引用@State父组件变量的值，如:

登录后复制

ComponentA({ highScore: this.highScore })

• 1.

@Observed

• @Observed应用于类，表示该类中的数据变更被UI页面管理，例如：

登录后复制

@Observed class ClassA {}

• 1.

@ObjectLink

• @ObjectLink应用于被@Observed所装饰类的对象（变量），例如：

登录后复制

@ObjectLink a: ClassA

• 1.

使用要求

• 1、@Observed 用于类，@ObjectLink 用于变量。
• 2、@ObjectLink装饰的变量类型必须为类（class type）。
• 3、类要被@Observed装饰器所装饰。

• 不支持简单类型参数，可以使用@Prop进行单向同步。

• 4、@ObjectLink装饰的对象变量是不可变的，但可以修改对象里面变量的值。

• 属性的改动是被允许的，当改动发生时，如果同一个对象被多个@ObjectLink变量所引用，那么所有拥有这些变量的自定义组件都会被通知去重新渲染。

• 5、@ObjectLink装饰的变量不可设置默认值。

• 必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume所装饰变量参与的TS表达式进行初始化。

• 6、@ObjectLink装饰的变量是私有变量，只能在组件内访问。

代码示例：

登录后复制

@Observed
class ClassA {
  public name : string;
  public c: number;
  constructor(c: number, name: string = '') {
    this.name = name;
    this.c = c;
  }
}
 
class ClassB {
  public a: ClassA;
  constructor(a: ClassA) {
    this.a = a;
  }
}
 
@Component
struct ViewA {
  label : string = "ep1";
  @ObjectLink a : ClassA;
  build() {
    Column() {
      Text(`ViewA [${this.label}]: a.c=${this.a.c}`)
        .fontSize(20)
      Button(`+1`)
        .width(100)
        .margin(2)
        .onClick(() => {
          this.a.c += 1;
        })
      Button(`reset`)
        .width(100)
        .margin(2)
        .onClick(() => {
          this.a = new ClassA(0); // 错误：ObjectLink装饰的变量a是不可变的
        })
    }
  }
}
 
@Entry
@Component
struct ViewB {
  @State b : ClassB = new ClassB(new ClassA(10));
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
      ViewA({label: "ViewA #1", a: this.b.a})
      ViewA({label: "ViewA #2", a: this.b.a})
 
      Button(`ViewB: this.b.a.c += 1` )
        .width(320)
        .margin(4)
        .onClick(() => {
          this.b.a.c += 1;
        })
      Button(`ViewB: this.b.a = new ClassA(0)`)
        .width(240)
        .margin(4)
        .onClick(() => {
          this.b.a = new ClassA(0);
        })
      Button(`ViewB: this.b = new ClassB(ClassA(0))`)
        .width(240)
        .margin(4)
        .onClick(() => {
          this.b = new ClassB(new ClassA(0));
        })
    }
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.
• 66.
• 67.
• 68.
• 69.
• 70.
• 71.

最后

《鸿蒙零基础入门学习指南》

本文档适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

目录

一、快速入门

• 开发准备
• 构建第一个ArkTS应用（Stage模型）
• 构建第一个ArkTS应用（FA模型）
• 构建第一个JS应用（FA模型）

二、开发基础知识

• 应用程序包基础知识
• 应用配置文件（Stage模型）
• 应用配置文件概述（FA模型）

三、资源分类与访问

• 资源分类与访问
• 创建资源目录和资源文件
• 资源访问

四、学习ArkTs语言

• 初识ArkTS语言
• 基本语法
• 状态管理
• 其他状态管理
• 渲染控制

原创作者: u_16163510 转载于: https://blog.51cto.com/u_16163510/11574781