HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组结构双向绑定

「爱情、让人受尽委屈。」 2024-04-22 07:30 27阅读 0赞

本文 我们还是来说 两个 harmonyos 状态管理的装饰器

@Observed与@ObjectLink  
他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的  
之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化

这里 我们模拟一个类数据结构

class Person{
        
      name: string
      age: number
      gf: Person
      constructor(name: string, age: number,gf?: Person) {
        
        this.name = name;
        this.age = age;
        this.gf = gf;
      }
    }

Person类 三个字段 name字符串 age数字 gf字段又套一个Person类对象  
然后 我们构造器 通过构造方法接到外面传的参数 给我们类自己的属性赋值

然后 我们组件这样写

@Entry
    @Component
    struct Dom {
        
      @State p: Person =new Person(
        '小猫猫',
        21,
        new Person('小小猫猫', 18)
      )
      build() {
        
        Row() {
        
          Column() {
        
            Text(this.p.gf.name)
            Button("修改").onClick(()=>{
        
              this.p.gf.name = "小狗狗";
            })
          }
          .width('100%')
        }
        .height('100%')
      }
    }

这里 我们声明一个 叫 p的变量 类型为我们上面定义的 Person 类类型 然后new实例化一个Person 对象 第一个参数 字符串类型的 小猫猫 第二个参数 数字类型的 21  
然后 第三个参数 在new一个Person对象 因为 gf 我们给的类型本来就是Person  
第一个参数 字符串类型 值为 小小猫猫 第二个参数 数字类型 18 这里 我们不需要继续往下套了 就第三个参数不传就好了

然后 我们Text组件 展示了这个 p对象下的gf字段 下的 name字段  
然后 我们Button按钮的点击事件更改这个name 为小狗狗

运行之后 我们 p.gf.name 的展示没问题  
![在这里插入图片描述][ee69b770ade2402eb72c106586ed6d30.png]  
但是 当我们点击按钮时 大家会发现 Text中的内容并没有变成小狗狗 依旧是 小小猫猫  
![在这里插入图片描述][82e8f4b7776e4a319c1656a33b35e5f5.png]  
其实数据依旧变了 但是 我们用的是 State装饰 它监听不到这么深的对象结构

这里 我们可以用 Observed加ObjectLink解决  
首先 你要将 需要用ObjectLink处理的类 上面加上 Observed 装饰器

@Observed
    class Person{
        
      name: string
      age: number
      gf: Person
      constructor(name: string, age: number,gf?: Person) {
        
        this.name = name;
        this.age = age;
        this.gf = gf;
      }
    }

然后 你要将 需要被监听的元素加上 ObjectLink修饰

我们将组件代码改成这样

@Entry
    @Component
    struct Dom {
        
      @State p: Person =new Person(
        '小猫猫',
        21,
        new Person('小小猫猫', 18)
      )
      build() {
        
        Row() {
        
          Column() {
        
            Domismin({
        p: this.p.gf})
            Button("修改").onClick(()=>{
        
              this.p.gf.name = "小狗狗";
            })
          }
          .width('100%')
        }
        .height('100%')
      }
    }
    @Component
    struct Domismin {
        
      @ObjectLink p: Person;
      build() {
        
        Text(this.p.name)
      }
    }

这里 我们多定义了一个 Domismin 组件  
里面就一个Text组件 用来展示 传进来的p属性的name  
然后 我们外面组件 将 p的gf字段 传给Domismin 组件做p属性 其实主要就是为了让 gf加上ObjectLink  
因为 在new时 是加不了注解的 所以 要多弄一个组件来绑

此时 我们点击内容就修改了  
![在这里插入图片描述][bad3517fe2e04b299fce18352d7d49ce.png]

这样 我们对象嵌套类型的就说完了

然后 还有我们数组元素为对象的格式了  
先定义一个这样的对象

class Person{
        
      name: string
      age: number
      constructor(name: string, age: number) {
        
        this.name = name;
        this.age = age;
      }
    }

就是个普通对象 两个字段 name 字符串类型 age 数字类型 构造器接受两个参数 然后给自己的属性赋值

然后 组件中这样写

@Entry
    @Component
    struct Dom {
        
      @State p: Person[] = [
        new Person('小猫猫',21),
        new Person('小狗狗',12),
        new Person('小鲤鱼',13)
      ]
      build() {
        
        Row() {
        
          Column() {
        
            ForEach(
              this.p,
              (item,index)=>{
        
                Row(){
        
                  Text(item.name)
                  Button("修改").onClick(()=>{
        
                    item.name = "我被修改了";
                  })
                }
              }
            )
          }
          .width('100%')
        }
        .height('100%')
      }
    }

我们先定义一个 p 字段 state修饰 类型为 数组 其中所有元素类型为 Person  
然后 初始 我们默认写了三条数据进去  
然后用 ForEach 循环渲染元素  
Text展示 Button点击触发修改 当前循环这个元素的name属性  
![在这里插入图片描述][9366d0173ebd4af4b951f73450e638fb.png]  
然后 我们尝试点击小鲤鱼的修改按钮  
![在这里插入图片描述][95fb0f3063834260bac3df712d98bf49.png]  
会发现 没有修改 还是因为 state并检查不到这么深

然后 还是老规矩 只有被 Observed装饰的类 实例化出来的对象 才能装饰 ObjectLink

@Observed
    class Person{
        
      name: string
      age: number
      constructor(name: string, age: number) {
        
        this.name = name;
        this.age = age;
      }
    }

然后组件改成这样

@Entry
    @Component
    struct Dom {
        
      @State p: Person[] = [
        new Person('小猫猫',21),
        new Person('小狗狗',12),
        new Person('小鲤鱼',13)
      ]
      build() {
        
        Row() {
        
          Column() {
        
            ForEach(
              this.p,
              (item,index)=>{
        
                Row(){
        
                  Domismin({
        p: item})
                  Button("修改").onClick(()=>{
        
                    item.name = "我被修改了";
                  })
                }
              }
            )
          }
          .width('100%')
        }
        .height('100%')
      }
    }
    
    @Component
    struct Domismin {
        
      @ObjectLink p: Person;
      build() {
        
        Text(this.p.name)
      }
    }

简单说 还是定义一个子组件 将数组下的每一个元素对象 都绑定上 ObjectLink  
然后 我们再次点击 小鲤鱼边上的修改按钮  
![在这里插入图片描述][0a0dba2d4cb846f78b6b03dab7ba1de9.png]  
这样就修改成功了

[ee69b770ade2402eb72c106586ed6d30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/80e1259124954fa6bc90774967df3b0c.png
[82e8f4b7776e4a319c1656a33b35e5f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/49e38b726b57434d9bbc4f560661d681.png
[bad3517fe2e04b299fce18352d7d49ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/953e3a87f4c449139afbede8d0f20894.png
[9366d0173ebd4af4b951f73450e638fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e218ac4d316e459da289aa32f3747bed.png
[95fb0f3063834260bac3df712d98bf49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/89df7c2d433f4c318ca9fa130c8092b4.png
[0a0dba2d4cb846f78b6b03dab7ba1de9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2c3d507c851b4175934d5fc3781aaba9.png