鸿蒙HarmonyOS NEXT实战开发：多层嵌套类监听实现案例

最新推荐文章于 2024-09-10 17:20:44 发布

前端_王华QAQ

最新推荐文章于 2024-09-10 17:20:44 发布

阅读量293

点赞数 13

分类专栏：鸿蒙next实战鸿蒙文章标签： harmonyos 鸿蒙鸿蒙系统华为od android 嵌入式硬件驱动开发

本文链接：https://blog.csdn.net/wanghuaQAQ/article/details/141066876

版权

鸿蒙next实战同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

鸿蒙

35 篇文章 0 订阅

订阅专栏

介绍

本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。

效果图预览

使用说明

加载完成后显示商品列表，点击刷新按钮可以刷新商品图片和价格。

实现思路

创建FistGoodsModel类，类对象是用@Observed修饰的类SecondGoodsItemList，SecondGoodsItemList类对象是用@Observed修饰的ThirdGoodsItem类，ThirdGoodsItem类对应的商品信息，是要被监听的对象。

/**
 * 表示商品详细数据的类型，是嵌套类的第三层
 * @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实例。

@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刷新。

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                   // 视图层-场景主页面