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

本文主要是介绍HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

class Person{name: stringage: numbergf: Personconstructor(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 的展示没问题
在这里插入图片描述
但是 当我们点击按钮时 大家会发现 Text中的内容并没有变成小狗狗 依旧是 小小猫猫
在这里插入图片描述
其实数据依旧变了 但是 我们用的是 State装饰 它监听不到这么深的对象结构

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

@Observed
class Person{name: stringage: numbergf: Personconstructor(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时 是加不了注解的 所以 要多弄一个组件来绑

此时 我们点击内容就修改了
在这里插入图片描述

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

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

class Person{name: stringage: numberconstructor(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属性
在这里插入图片描述
然后 我们尝试点击小鲤鱼的修改按钮
在这里插入图片描述
会发现 没有修改 还是因为 state并检查不到这么深

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

@Observed
class Person{name: stringage: numberconstructor(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
然后 我们再次点击 小鲤鱼边上的修改按钮
在这里插入图片描述
这样就修改成功了

这篇关于HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/703210

相关文章

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA

C#之List集合去重复对象的实现方法

《C#之List集合去重复对象的实现方法》:本文主要介绍C#之List集合去重复对象的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C# List集合去重复对象方法1、测试数据2、测试数据3、知识点补充总结C# List集合去重复对象方法1、测试数据

Golang 日志处理和正则处理的操作方法

《Golang日志处理和正则处理的操作方法》:本文主要介绍Golang日志处理和正则处理的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录1、logx日志处理1.1、logx简介1.2、日志初始化与配置1.3、常用方法1.4、配合defer

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》:本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC(控制反转)容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解(主流方式)1.3 基于Java

基于Python+PyQt5打造一个跨平台Emoji表情管理神器

《基于Python+PyQt5打造一个跨平台Emoji表情管理神器》在当今数字化社交时代,Emoji已成为全球通用的视觉语言,本文主要为大家详细介绍了如何使用Python和PyQt5开发一个功能全面的... 目录概述功能特性1. 全量Emoji集合2. 智能搜索系统3. 高效交互设计4. 现代化UI展示效果

C++/类与对象/默认成员函数@构造函数的用法

《C++/类与对象/默认成员函数@构造函数的用法》:本文主要介绍C++/类与对象/默认成员函数@构造函数的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录名词概念默认成员函数构造函数概念函数特征显示构造函数隐式构造函数总结名词概念默认构造函数:不用传参就可以