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学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

hdu1254(嵌套bfs,两次bfs)

/*第一次做这种题感觉很有压力,思路还是有点混乱,总是wa,改了好多次才ac的思路:把箱子的移动当做第一层bfs,队列节点要用到当前箱子坐标(x,y),走的次数step,当前人的weizhi(man_x,man_y),要判断人能否将箱子推到某点时要嵌套第二层bfs(人的移动);代码如下:

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

hdu1565(状态压缩)

本人第一道ac的状态压缩dp,这题的数据非常水,很容易过 题意:在n*n的矩阵中选数字使得不存在任意两个数字相邻,求最大值 解题思路: 一、因为在1<<20中有很多状态是无效的,所以第一步是选择有效状态,存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值,状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c

hdu2241(二分+合并数组)

题意:判断是否存在a+b+c = x,a,b,c分别属于集合A,B,C 如果用暴力会超时,所以这里用到了数组合并,将b,c数组合并成d,d数组存的是b,c数组元素的和,然后对d数组进行二分就可以了 代码如下(附注释): #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

csu1329(双向链表)

题意:给n个盒子,编号为1到n,四个操作:1、将x盒子移到y的左边;2、将x盒子移到y的右边;3、交换x和y盒子的位置;4、将所有的盒子反过来放。 思路分析:用双向链表解决。每个操作的时间复杂度为O(1),用数组来模拟链表,下面的代码是参考刘老师的标程写的。 代码如下: #include<iostream>#include<algorithm>#include<stdio.h>#

usaco 1.3 Mixing Milk (结构体排序 qsort) and hdu 2020(sort)

到了这题学会了结构体排序 于是回去修改了 1.2 milking cows 的算法~ 结构体排序核心: 1.结构体定义 struct Milk{int price;int milks;}milk[5000]; 2.自定义的比较函数,若返回值为正,qsort 函数判定a>b ;为负,a<b;为0,a==b; int milkcmp(const void *va,c

hdu 1166 敌兵布阵(树状数组 or 线段树)

题意是求一个线段的和,在线段上可以进行加减的修改。 树状数组的模板题。 代码: #include <stdio.h>#include <string.h>const int maxn = 50000 + 1;int c[maxn];int n;int lowbit(int x){return x & -x;}void add(int x, int num){while