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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 学习和实践笔记(3)

安装和配置成功: 运行第一个程序时出现这个错误:javac不是内部或外部命令,也不是可运行的程序或批处理文件。 找到这篇文章看了下:javac 不是内部或外部命令,也不是可运行的程序 或批处理文件。_javac 不是内部或外部…

2024/2/12

分支、循环练习 1、选择题 1.1、以下程序的输出结果是____A____。 main() { int k11,k22,k33,x15; if(!k1) x--; else if(k2) if(k3) x4; else x3; printf(“x%d\n”,x); } A x4 B x15 C x14 D x3 1.2、有以下程序,while循环执行____A____次…

88.Go设计优雅的错误处理

文章目录 导言一、Go 的约定二、简单错误创建1、 errors.New()2、fmt.Errorf() 三、哨兵错误四、对错误进行编程1、优雅的错误处理设计2、与错误有关的的API 五、总结 导言 在 75.错误码设计、实现统一异常处理和封装统一返回结果 中,我们介绍了错误码的设计&#…

矩阵在计算机图像处理中的应用

矩阵在计算机图像处理中是非常核心的概念,因为它们为表示和操作图像数据提供了一种非常方便和强大的方式。以下是矩阵在计算机图像处理中的一些关键作用: 图像表示:在计算机中,图像通常被表示为像素矩阵,也就是二维数组…

假期day5

TCP UDP区别 共同点:都是属于传输层的协议 TCP:稳定。面向连接的,有可靠的数据传输服务。传输过程中数据无误,无丢失,无失序,无重复。传输效率低,耗费资源多。数据收发不同步,有沾…

【JavaScript】变量声明和赋值

文章目录 变量的声明1. 使用 var2. 使用 let3. 使用 const 变量的赋值变量的作用域最佳实践总结 在 JavaScript 中, 变量是我们存储和操作数据的关键。本篇博客将讨论 JavaScript 中的变量声明和赋值,涵盖不同的声明关键字、变量的作用域以及一些最佳实…

从源码学习final的使用

从源码学习final的使用 final的作用 ​ final字面意思,意为最终的、不可变的。在Java中,final可以用来修饰类、方法和变量,可以分别起到不同的作用。 final修饰类:表示该类不可以被继承;final修饰方法:表…

Netty Review - NioEventLoopGroup源码解析

文章目录 概述类继承关系源码分析小结 概述 EventLoopGroup bossGroup new NioEventLoopGroup(1); EventLoopGroup workerGroup new NioEventLoopGroup();这段代码是在使用Netty框架时常见的用法,用于创建两个不同的EventLoopGroup实例,一个用于处理连…

Educational Codeforces Round 1(远古edu计划)

A. 高斯求和&#xff0c;如果2次幂小于n就减2次 #include<bits/stdc.h> #define INF 1e9 using namespace std; typedef long long ll; const int N2e59; int a[N]; int f[N],vis[N]; ll sn(ll a1,ll an,ll num){return (a1an)*num/2;} void init(){f[1]1;for(int i2;i…

【Linux】内核中的链表

&#x1f525;博客主页&#xff1a;PannLZ &#x1f38b;系列专栏&#xff1a;《Linux系统之路》 &#x1f94a;不要让自己再留有遗憾&#xff0c;加油吧&#xff01; 文章目录 链表1.创建和初始化2.创建节点3.添加节点4.删除节点5.遍历 链表 内核开发者只实现了循环双链表&am…

Android 9.0 禁用adb install 安装app功能

1.前言 在9.0的系统产品定制化开发中,在进行一些定制开发中,对于一些app需要通过属性来控制禁止安装,比如adb install也不允许安装,所以就需要 熟悉adb install的安装流程,然后来禁用adb install安装功能,接下来分析下adb 下的安装流程 2.禁用adb install 安装app功能的…

1. pick gtk dll 程序的制作

文章目录 前言预览细节要点初始窗口尺寸提示音快速提示信息对话框AlertDialog鼠标移入移出事件布局与父子控件关系图片 后续源码及资源 前言 在之前的打包测试中我提到了需要一个挑选dll的程序于是我打算用Gtk来制作这个程序 预览 细节要点 初始窗口尺寸 只有主窗口有set_d…

unity显示图片

目录 创建c#脚本 自己创建gui组件&#xff1a; 入门教程&#xff1a; 读取图片&#xff1a; Unity读取图片并显示到UI中 显示双目相机&#xff0c;可以跑通 unity3d显示图片 参考教程&#xff0c;GameObject Unity UGUI的Image&#xff08;图片&#xff09;组件的介绍及…

基于无线传感器网络的LC-DANSE波束形成算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1LC-DANSE算法原理 4.2 LCMV算法原理 5.完整程序 1.程序功能描述 在无线传感器网络中&#xff0c;通过MATLAB对比LC-DANSE波束形成算法和LCMV波束形成算法。对比SNR&#xff0c;mse等指标…

Day45- 动态规划part13

一、最长递增子序列 题目一&#xff1a;300. 最长递增子序列​​​​​​​ ​​​​​​​300. 最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数…

Java中的IO介绍

本章内容 一 、File概念 File可以代表一个目录或者一个文件&#xff0c;并不能代表文件的内容 文件和流的区别&#xff1a;File关注的是文件本身的特征&#xff0c;如名称、路径、修改时间、大小。 流关注的是文件的内容。 二、File基本的操作 常见构造方法 | File(String p…

以用户为中心,酷开科技荣获“消费者服务之星”

在企业顺应消费升级的道路中&#xff0c;企业自身不仅要着力强化对于消费者服务意识的提升&#xff0c;并且要树立诚信自律的行业示范带头作用&#xff0c;助力消费环境稳中向好&#xff0c;不断满足人民群众对美好生活的期待。企业的发展需要消费者的认可&#xff0c;酷开科技…

算法刷题框架

前言&#xff1a;最近积累了一些算法题量&#xff0c;正在刷东神的算法笔记&#xff0c;监督自己记录下读后启发&#xff0c;顺便帮助道友们阅读 数据结构 这一部分老生常谈&#xff0c;数据的存储方式只有顺序存储和链式存储。 最基本的数组和链表对应这两者&#xff0c;栈…

常见的单片机及其功能

在当今电子技术快速发展的时代&#xff0c;单片机作为核心组件&#xff0c;在各类电子项目和产品中扮演着至关重要的角色。它们的应用范围从简单的家用电器控制到复杂的工业自动化系统&#xff0c;几乎无处不在。接下来&#xff0c;我们将以轻松的语言&#xff0c;探讨几种广泛…

放大器设计

目录 简介单阶段放大器:低噪声放大器例题例题2例题3简介 放大器能够放大信号,是电路设计中不可或缺的一种重要软件。根据应用和结构的不同,可以将放大器分为三类。 小信号:设计目标是在输入输出匹配条件下,获取一个特定的传输增益,对输出信号的功率没有要求。低噪声:相…