HarmonyOS鸿蒙学习笔记 @Consume和@Provide作用说明和简单案例

Posted 2022-12-05 郭梧悠

这两个标签在HarmonyOS中很重要，官方文档对其解释是：Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。
下面写个简单的demo代码来理解下，代码如下，注意@Provide修饰的变量，并不需要通过类似Java的set或者构造器的方式赋值给@Consume的变量，只需要保持两者的变量名一样即可。：

@Entry
@Component
struct ProvidePage 
  @Provide count: number = 1
  build() 
    Column() 
      //蓝色数字
      Text(`$this.count`).fontColor(Color.Blue).fontSize(30)
      //使用ConsumeComponent的时候并没有将ProvidePage.count传给ConsumeComponent
      ConsumeComponent()
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)

  


@Component
struct ConsumeComponent 
  //变量名要跟@Provide一样
  @Consume count: number
  build() 
    Column() 
      //红色数字
      Text(this.count.toString()).fontSize(30)
        .fontColor(Color.Red).margin( top: 30 )
      //点击+1
      Text("点击+1").fontSize(30).onClick(() => 
        this.count++
      ).margin( top: 30 )
    

  

运行效果如下：

然后点击三次“点击+1”按钮，会自动刷新页面，效果如下：

同理，我们将 @Provide修饰的变量进行count++操作，效果也一样ProvidePage 改造如下，为Text新增点击事件：

@Entry
@Component
struct ProvidePage 
  @Provide count: number = 1
  build() 
    Column() 
      //蓝色数字
      Text(`$this.count`).fontColor(Color.Blue).fontSize(30)
        .onClick(() => 
        this.count++
      )
      ConsumeComponent()
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)

  

经过测试发现：
1、当我们点击上面的蓝色Text的时候执行count++，比如此时count=2；再点击“点击+1”按钮，count就会在2的基础上+1.而变成了3，蓝色Text和红色Text此时都展示3；
2、同理，我们点击下面的“点击+1”按钮进行count++，假设count=3，那么再点击蓝色Text,此时count就在3的基础上+1.数字变成4,Text和红色Text此时都展示4；

注意@Provide修饰的变量，并不需要通过类似Java的set或者构造器的方式赋值给@Consume的变量，只需要保持两者的变量名一样即可。
事实上，HarmonyOs也提供了一个@Link也可以实现上述效果，感兴趣的读者可以阅读博主HarmonyOS鸿蒙学习笔记（12）@Link的作用一文了解一下。
参考资料：

Consume和Provide官方资料