介绍
本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。
效果图预览
使用说明
- 加载完成后显示商品列表，点击刷新按钮可以刷新商品图片和价格。
实现思路
- 创建FistGoodsModel类，类对象是用@Observed修饰的类SecondGoodsItemList，SecondGoodsItemList类对象是用@Observed修饰的ThirdGoodsItem类，ThirdGoodsItem类对应的商品信息，是要被监听的对象。源码参考GoodsModel.ets
/**
* 表示商品详细数据的类型，是嵌套类的第三层
* @class
*/
@Observed
export class ThirdGoodsItem {
imgSrc: Resource; // 商品图片
price: string; // 商品价格
constructor(imgSrc: Resource, price: string) {
this.imgSrc = imgSrc;
this.price = price;
}
}
/**
* 表示商品列表的类型，是嵌套类的第二层
* @class
*/
@Observed
export class SecondGoodsItemList {
itemList: Array<ThirdGoodsItem>;
constructor(imgSrc: Array<ThirdGoodsItem>) {
this.itemList = imgSrc;
}
}
/**
* 表示商品模型的类型，是嵌套类的首层
* @class
*/
export class FistGoodsModel {
itemList: SecondGoodsItemList;
constructor(itemList: SecondGoodsItemList) {
this.itemList = itemList;
}
}
- 自定义组件中用@ObjectLink修饰对应class实例。源码参考ProductView.ets
@Component
export default struct GoodViewStruct {
@Link model: FistGoodsModel;
build() {
Column() {
SecondViews()
}
}
}
@Component
struct SecondViews {
@ObjectLink data: SecondGoodsItemList
build() {
List() { ... }
}
}
@Component
struct ThirdView {
@ObjectLink item: ThirdGoodsItem
build() {
Column() { ... }
}
}
- 更新第三层嵌套class ThirdGoodsItem的数据，UI刷新。源码参考VariableWatchView.ets
this.itemList.forEach((item, index) => {
item.imgSrc = originItemList[index].imgSrc;
item.price = originItemList[index].price;
}
高性能知识点
本示例介绍使用@Observed装饰器和@ObjectLink装饰器来解决需要单独监听多层嵌套类对象属性的方案。
工程结构&模块类型
VariableWatchView // har类型
|---model
| |---GoodsModel.ets // 数据模型
|---view
| |---ProductView.ets // 视图层-场景列表页面
| |---VariableWatchView.ets // 视图层-场景主页面
模块依赖
不涉及
参考资料
@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化
**关注VX公众号：Android 老皮 **
《鸿蒙（HarmonyOS）开发学习指南》
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用（Stage模型）
3、构建第一个ArkTS应用（FA模型）
4、构建第一个JS应用（FA模型）
5、........
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件（Stage模型）
3、应用配置文件概述（FA模型）
4、.......
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、.......
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、......
第五章 UI开发
1.方舟开发框架（ArkUI）概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4.......
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7.......
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17......
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4.......
