鸿蒙(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装饰的自定义组件中使用。

你可能感兴趣的:(鸿蒙(HarmonyOs),ArkTs,华为,harmonyos)