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

相关文章

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

C++原地删除有序数组重复项的N种方法

《C++原地删除有序数组重复项的N种方法》给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度,不要使用额外的数组空间,你必须在原地修改输入数组并在使用O(... 目录一、问题二、问题分析三、算法实现四、问题变体:最多保留两次五、分析和代码实现5.1、问题分析5.