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

Posted 郭梧悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HarmonyOS鸿蒙学习笔记 @Consume和@Provide作用说明和简单案例相关的知识,希望对你有一定的参考价值。

这两个标签在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的变量,只需要保持两者的变量名一样即可。
参考资料:

Consume和Provide官方资料

以上是关于HarmonyOS鸿蒙学习笔记 @Consume和@Provide作用说明和简单案例的主要内容,如果未能解决你的问题,请参考以下文章

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

HarmonyOS鸿蒙学习笔记(12)@Link的作用

HarmonyOS鸿蒙学习笔记(12)@Link的作用

HarmonyOS鸿蒙学习笔记(12)@Link的作用

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用