鸿蒙(HarmonyOS)应用开发——管理组件状态

状态管理

在应用中，界面通常都是动态的。

改变

更新

用户点击目标项

展开/收起状态

目标项更新

ArkUI作为声明式UI，是具有状态UI更新的特点。当用户进行界面交互或有外部时间引起状态改变时，状态的变化会触发组件自动更新。

改变

驱动更新

用户交互或外部事件

状态

UI

ArkUI框架提供了多种管理状态的装饰器来修饰变量。

状态属性值

装饰器	说明
@State	组件内的状态管理
@Prop	从父组件单项同步状态
@Link	与父组件双向同步状态
@Provide 和 @Comsume	跨组件层级双向同步状态

组件内的状态管理 @State

当需要在组件内使用状态来控制UI的不同呈现方式时，可以使用@State装饰器。

@Component
export default struct TargetListItem {
  @State isExpanded: boolean = false;
  ...

  build() {
    ...
      Column() {
        ...
        if (this.isExpanded) {
          Blank()
          ProgressEditPanel(...)
        }
      }
      .height(this.isExpanded ? $r('app.float.expanded_item_height')                  
      : $r('app.float.list_item_height'))
      .onClick(() => {
        ...
             this.isExpanded = !this.isExpanded;
        ...
       })
    ...
  }
}

从父组件单向同步状态@Prop

当子组件的状态依赖从父组件传递而来时，可以用@Prop装饰。当父组件中状态变化时，该状态也会更新至@Prop修饰的变量；对@Prop修饰的变量的修改不会影响其父组件中的状态

与父组件双向同步状态 @Link、@Watch

子组件列表

目标一

目标二

在开发过程中，尤其是列表中，点击了目标一，让目标一有了选中的样式，又重新点击了目标二，那么目标一就需要恢复原样。那么如何用代码实现？

以列表为例子；每一个列表项都有索引值index,我们用clickIndex:记录被点击的目标索引；通过@Link会通知子组件点击了哪一个。然后再通过@Watch来监听是否点击了另一个。

 @Link @Watch('onClickIndexChanged') clickIndex: number;
  @State isExpanded: boolean = false
  ...

  onClickIndexChanged() {
    if (this.clickIndex != this.index) {
      this.isExpanded = false;
    }
  }

跨组件层级双向同步状态：@Provide和@Consume

跨组件层级双向同步状态是指@Provide修饰的状态变量自动对提供者组件的所有后代组件可用，后代组件通过使用@Consume装饰的变量来获得对提供的状态变量的访问。
@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。
@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染。

使用@Provide的好处是开发者不需要多次将变量在组件间传递

@Provide/@Consume装饰的状态变量有以下特性：

• @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
• 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
• @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。

// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

嵌套类对象属性变化@Observed、@ObjectLink

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

• 被@Observed装饰的类，可以被观察到属性的变化；
• 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
• 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。

限制条件

• 使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。
• @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。