ETS装饰器学习之Provide、Consume 原创

droidzxy

发布于 2022-11-8 12:05

浏览

1收藏

在学习声明式UI框架ArkUI的过程中，会遇到装饰器的概念，不管是简单的示例页面还是复杂的大程序，都离不开装饰器的使用，为了帮助自己对装饰器有一个基本的了解，并能够熟练的使用，所以专门针对ets装饰器系统的学习了一下，并整理成简单的笔记，以便健忘的我随时回来复习一下。

本文主要介绍@Provide和@Consume，两者需要配合使用。@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染。

@Provide

使用@Provide(‘alias’)这种形式，定义一个变量并必须赋初始值，类似@State修饰的变量，变量的改变会自动调用组件的build函数刷新UI界面。通过@Provide修饰的变量，可以在其他组件中通过@Consume定义同样别名的变量，来进行引用，有些类似Link，一方更新，另一方也会跟随改变。

示例代码：

@Entry
@Component
struct Index {
  @Provide("indexCount") count: number = 0;

  build() {
    Row() {
      Column() {
        Text(this.count.toString())
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button(`+1`)
          .margin(10)
          .onClick(() => {
            this.count += 1;
          })
          .width(130)
          .backgroundColor(Color.Green)

        SubComponent()

      }
      .width('100%')
    }
    .height('100%')
  }
}



@Component
struct SubComponent {
  build() {
    Column() {
      SubSubComponent()
    }
  }
}

@Component
struct SubSubComponent {
  @Consume("indexCount") abc: number

  build() {
    Column() {
      Button(`-1`)
        .margin(10)
        .onClick(() => {
          this.abc -= 1;
        })
        .width(130)
        .backgroundColor(Color.Red)
    }.width('100%')
  }
}

效果预览：

ETS装饰器学习之Provide、Consume-鸿蒙开发者社区

@Consume

不可设置默认初始值，它的值是跟随provide指定的相同别名的变量的值一起变化的。
@Consume修饰的变量名称不一定要与@provide修饰的变量名相同，但别名需要一致。但如果两者都没有定义别名，那么变量名就必须相同。上面的例子，我们取消设置别名。

示例代码：




@Entry
@Component
struct Index {
  @Provide count: number = 0;

  build() {
    Row() {
      Column() {
        Text(this.count.toString())
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button(`+1`)
          .margin(10)
          .onClick(() => {
            this.count += 1;
          })
          .width(130)
          .backgroundColor(Color.Green)

        SubComponent()

      }
      .width('100%')
    }
    .height('100%')
  }
}



@Component
struct SubComponent {
  build() {
    Column() {
      SubSubComponent()
    }
  }
}

@Component
struct SubSubComponent {
  @Consume count: number

  build() {
    Column() {
      Button(`-1`)
        .margin(10)
        .onClick(() => {
          this.count -= 1;
        })
        .width(130)
        .backgroundColor(Color.Red)
    }.width('100%')
  }
}