使用@Observed/@ObjectLink监听多层状态的变化

开发中,希望通过状态控制页面刷新时,一般考虑装饰器@state,但是在嵌套场景中,单单使用@state并不能监听到变量的状态变化,此时需要配合使用@State、@Observed、@ObjectLink三个装饰器监听多层状态变化。

HarmonyOS
2024-05-26 17:57:25
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
JKings

使用的核心API

@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

核心代码解释

// 使用@Observed修饰ClassB 
@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修饰的变量 
@Component 
struct DChild { 
  // 使用@ObjectLink修饰ClassB的实例class_B 
  @ObjectLink class_B: ClassB; 
 
  build() { 
    Row() { 
      // 将ClassB的成员变量b在UI呈现出来 
      Text(`${this.class_B.b}`) 
    } 
    .margin({ top: 100 }) 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @State o1: ClassA = new ClassA(new ClassB(0)); 
 
  build() { 
    Column() { 
      DChild({ class_B: this.o1.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) 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 22:43:23
相关问题
ArkTS中如何监听状态变量变化
53浏览 • 1回复 待解决
如何监听窗口大小变化
895浏览 • 1回复 待解决
如何监听文件或文件目录变化
631浏览 • 1回复 待解决
怎么监听蓝牙开启状态
3480浏览 • 1回复 待解决
如何监听Viewmodel里变量值变化
776浏览 • 1回复 待解决
如何监听数组内对象属性变化
1158浏览 • 1回复 待解决
UIAbility中是否可以监听页面变化
473浏览 • 1回复 待解决
如何获取设备横竖屏状态变化通知
721浏览 • 1回复 待解决
监听应用前后台状态切换api吗
491浏览 • 1回复 待解决
如何监听设备横竖屏切换状态
594浏览 • 1回复 待解决