HarmonyOS鸿蒙学习笔记(6) @Consume和@Provide作用说明和简单案例
这两个标签在HarmonyOS中很重要,官方文档对其解释是:Provide
作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。Consume
在感知到Provide
数据的更新后,会触发当前view的重新渲染。
下面写个简单的demo代码来理解下,代码如下,注意@Provide修饰的变量,并不需要通过类似Java的set或者构造器的方式赋值给@Consume的变量,只需要保持两者的变量名一样即可。:
@Entry@Componentstruct 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) }}@Componentstruct 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@Componentstruct 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官方资料