HarmonyOS | 状态管理(十) | @Watch (状态变量更改通知)

最新推荐文章于 2024-04-27 21:35:54 发布

谭祖爱

最新推荐文章于 2024-04-27 21:35:54 发布

阅读量1k

点赞数

分类专栏： Android开发 # [HarmonyOS入门应用开发] 文章标签： harmonyos Watch

本文链接：https://blog.csdn.net/tanzuai/article/details/136458301

版权

Android开发同时被 2 个专栏收录

59 篇文章 4 订阅

订阅专栏

[HarmonyOS入门应用开发]

11 篇文章 0 订阅

订阅专栏

系列文章目录

个人博客主页 ：谭祖爱 & 技术博客

项目实例地址 ： RecordHarmonyOSProject

前言

上一篇我们讲到了 设备环境查询 (Environment)，这篇文章我们讲解 状态变量更改通知 (@Watch)

一、@Watch是什么？

@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数。

二、@Watch使用场景

1.@Watch和自定义组件更新

@Component
struct TotalView {
  @Prop @Watch('onCountUpdated') count: number;
  @State total: number = 0;
  // @Watch 回调
  onCountUpdated(): void {
    this.total += this.count;
  }

  build() {
    Text(`Total: ${this.total}`)
  }
}

@Entry
@Component
struct WatchPage {
  @State count: number = 0;

  build() {
    Column() {
      Button('add to basket')
        .onClick(() => {
          this.count++
        })
      TotalView({ count: this.count })
    }
  }
}

处理步骤：

CountModifier自定义组件的Button.onClick点击事件自增count。
由于@State count变量更改，子组件TotalView中的@Prop被更新，其@Watch(‘onCountUpdated’)方法被调用，更新了子组件TotalView 中的total变量。
子组件TotalView中的Text重新渲染。

2.@Watch与@Link组合使用

class PurchaseItem {
  static NextId: number = 0;
  public id: number;
  public price: number;

  constructor(price: number) {
    this.id = PurchaseItem.NextId++;
    this.price = price;
  }
}

@Component
struct BasketViewer {
  @Link @Watch('onBasketUpdated') shopBasket: PurchaseItem[];
  @State totalPurchase: number = 0;

  updateTotal(): number {
    let total = this.shopBasket.reduce((sum, i) => sum + i.price, 0);
    // 超过100欧元可享受折扣
    if (total >= 100) {
      total = 0.9 * total;
    }
    return total;
  }
  // @Watch 回调
  onBasketUpdated(propName: string): void {
    this.totalPurchase = this.updateTotal();
  }

  build() {
    Column() {
      ForEach(this.shopBasket,
        (item) => {
          Text(`Price: ${item.price.toFixed(2)} €`)
        },
        item => item.id.toString()
      )
      Text(`Total: ${this.totalPurchase.toFixed(2)} €`)
    }
  }
}

@Entry
@Component
struct WatchLinkPage {
  @State shopBasket: PurchaseItem[] = [];

  build() {
    Column() {
      Button('Add to basket')
        .onClick(() => {
          this.shopBasket.push(new PurchaseItem(Math.round(100 * Math.random())))
        })
      BasketViewer({ shopBasket: $shopBasket })
    }
  }
}