HarmonyOS 鸿蒙Next开发案例 | 监听多层状态变化

HarmonyOS 鸿蒙Next开发案例 | 监听多层状态变化 场景说明

应用开发过程中,当希望通过状态变量控制页面刷新时,大家通常想到的就是装饰器@State,但是在嵌套场景下,单单使用@State并不能监听到变量的状态变化,这就引出了@Observed/@ObjectLink装饰器。本文就为大家介绍如何配合使用@State@Observed@ObjectLink三个装饰器监听多层状态变化。

概念原理

在讲解具体操作前,大家先理解以下几个概念:

  • 第一层状态变化:指不包含嵌套关系的变量的变化,比如string、number、boolean等基础数据类型的状态变化,以及嵌套结构中第一层变量的状态变化。
  • 多层状态变化:指包含嵌套关系的二层及以下变量的变化,比如嵌套类中被嵌套类的成员变量的状态变化,嵌套数组中被嵌套数组的状态变化等。

第一层变量的状态变化可以用@State监听,二层及以下变量的状态变化则需要使用@Observed/@ObjectLink监听。以嵌套结构举例,如下图:

为便于理解,通过以下例子具体说明单层和多层状态变化:

class ClassA {
  public c: number;

  constructor(c: number) {
    this.c = c;
  }
}

class ClassB {
  // ClassB成员变量的类型为ClassA,ClassA为被嵌套类
  public a: ClassA;

  constructor(a: ClassA) {
    this.a = a;
  }
}

b: ClassB
// 变量a为ClassB的成员变量,为第一层变量,所以变量a的状态变化即为第一层状态变化
this.b.a = new ClassA(0)
// 变量c为被嵌套类ClassA的成员变量,变量c的状态变化即为第二层状态变化
this.b.a.c = 5

监听第一层状态变化

监听第一层状态变化可以使用@State修饰变量,变量发生变化后即可同步刷新UI,这是大家最常用的场景,为便于理解,此处举例说明一下:

class ClassA {
  public a:number

  constructor(a:number) {
    this.a = a;
  }
}

@Component
struct ViewA {
  // 使用[@State](/user/State)修饰变量class_A,以监听其变化
  [@State](/user/State) class_A: ClassA = new ClassA(0);

  build() {
    Column() {
      Row(){
        Button(`第一层变量+1`)
          .margin({top:10,right:20})
          .backgroundColor('#E8A027')
          .onClick(() => {
            // class_A的成员变量a加1,class_A发生变化
            this.class_A.a += 1;
          })
        // 将第一层变量在UI呈现出来
        Text(`${this.class_A.a}`)
      }
      .margin({top:50})

      Row(){
        Button(`第一层变量变为2`)
          .margin({top:10,right:20})
          .onClick(() => {
            // 将新的ClassA实例赋值给class_A,class_A发生变化
            this.class_A = new ClassA(2);
          })
        // 将第一层变量在UI呈现出来
        Text(`${this.class_A.a}`)
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

效果如下,如图可以看出第一层变量发生变化后可以实时在UI呈现出来,所以@State可以有效的监听第一层变量的状态变化:

监听多层状态变化

接下来,我们介绍如何使用@Observed/@ObjectLink监听多层状态变化。 在第一层状态监听的基础上我们引入ClassB,构造一个嵌套结构,从而具有多层变量,如下:

// 引入ClassB
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }
}

class ClassA {
  // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
  public a:ClassB

  constructor(a:ClassB) {
    this.a = a;
  }
}

此时我们可以验证一下,如果仅使用@State是否可以监听到第二层变量的变化:

// 引入ClassB
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }

  class ClassA {
    // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
    public a:ClassB

    constructor(a:ClassB) {
      this.a = a;
    }
  }

  @Component
  struct ViewA {
    // 使用[@State](/user/State)修饰变量class_A
    [@State](/user/State) class_A: ClassA = new ClassA(new ClassB(0));

    build() {
      Column() {
        Row(){
          // 点击按钮,第二层变量发生变化
          Button('第二层变量+1')
            .margin({top:10,right:20})
            .backgroundColor('#E8A027')
            .onClick(() => {
              // 第二层变量变化,嵌套类ClassB的成员变量b加1
              this.class_A.a.b += 1;
            })
          // 将第二层变量在UI呈现出来
          Text(`${this.class_A.a.b}`)
        }
        .margin({top:50})
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
  }

效果如下,可以看出当第二层变量发生变化时,UI没有任何变化,所以单纯使用@State不能监听到二层及以下变量的变化:

接下来我们使用@Observed/@ObjectLink监听本例中第二层变量的变化。 根据使用规则,需要使用@Observed修饰嵌套类,使用@ObjectLink修饰嵌套类的实例,且@ObjectLink不能在被@Entry修饰的组件中使用,所以我们构建一个子组件,然后在父组件中进行引用,具体代码如下:

// 使用[@Observed](/user/Observed)修饰ClassB
[@Observed](/user/Observed)
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }
}

class ClassA {
  // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
  public a:ClassB

  constructor(a:ClassB) {
    this.a = a;
  }
}

// 构建子组件ViewB用于承载[@ObjectLink](/user/ObjectLink)修饰的变量
@Component
struct ViewB {
  // 使用[@ObjectLink](/user/ObjectLink)修饰ClassB的实例class_B
  [@ObjectLink](/user/ObjectLink) class_B: ClassB;
  build() {
    Row() {
      // 将ClassB的成员变量b在UI呈现出来
      Text(`${this.class_B.b}`)
    }
    .margin({top:100})
  }
}

@Component
struct ViewA {
  [@State](/user/State) class_A: ClassA = new ClassA(new ClassB(0));

  build() {
    Column() {
      ViewB({ class_B: this.class_A.a })
      Row(){
        // 点击按钮,第二层变量发生变化
        Button('第二层变量class_B.b加1')
          .margin({top:10,right:20})
          .backgroundColor('#E8A027')
          .onClick(() => {
            // 第二层变量变化,嵌套类ClassB的成员变量b加1
            this.class_A.a.b += 1;
          })
      }
      .margin({top:50})
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

我们来看下效果:

如图,现在当二层变量发生变化时,可以完美的被监听到,并在UI中刷新出来了。

当然,嵌套数组等也是同样的原理,大家可以参考官方指南进行尝试。

参考

[@Observed@ObjectLink:嵌套类对象属性变化](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-observed-and-objectlink-0000001473697338-V3?catalogVersion=V3)


更多关于HarmonyOS 鸿蒙Next开发案例 | 监听多层状态变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next开发案例 | 监听多层状态变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


姓名: 张三
职位: 软件工程师
简介: 拥有超过10年的软件开发经验,擅长Java和Python编程。

回到顶部