OpenHarmony ArkUI 实战开发—ETS 装饰器解读

前言

最近利用空闲时间在学习华为方舟开发框架（简称：ArkUI）的ets开发，发现在ets语言中装饰器的有着非常重要的作用，在写每一个自定义组件时都需要用到它，看到装饰器这个字眼，想起之前学过的设计模式里的装饰器模式（允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装），ets中的装饰器的作用就是类似这样的。华为官网中对装饰器的介绍也比较详细，参照官网的讲解，自己对其进行了汇总，方便后续理解与查阅。

装饰器

1、@Component

装饰内容为struct，@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种组件就是自定义组件

• 所有的UI都是由组件构成，组件的数据结构为struct
• 自定义组件可以调用其他自定义组件和内置组件
• 自定义组件内部必须实现build方法来描述UI结构
• 禁止自定义构造函数

@Component

struct MyComponent {

    build() {

        Column() {

            Text('my component')

                .fontColor(Color.Red)

        }.alignItems(HorizontalAlign.Center)

    }

}



@Component

struct ParentComponent {

    build() {

        Column() {

            MyComponent()

            Text('we use component')

                .fontSize(20)

        }

    }

}

2、@Entry

装饰内容为struct，用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。

• 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。即一个页面有且仅有一个@Entry

// 只会渲染加载出 MyComponent 组件，显示hello world

@Entry

@Component

struct MyComponent {

    build() {

        Column() {

            Text('hello world')

                .fontColor(Color.Red)

        }

    }

}



@Component

struct HideComponent {

    build() {

        Column() {

            Text('goodbye')

                .fontColor(Color.Blue)

        }

    }

}

3、@Preview

装饰内容为struct，用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览。

• 单组件预览，仅预览被@Preview装饰的自定义组件

• 在单个源文件中，最多可以使用10个**@Preview**装饰一个自定义组件

多个组件预览

4、@Builder

装饰内容为方法， @Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

@Entry

@Component

struct CompA {

  @State message: string = 'Builder演示'

  @State isA: boolean = false

  @State isB: boolean = false

  @Builder myBuilder(str: string, state: boolean, click: () => void) {

    Row() {

      Text(str + ":" + state)

        .fontSize(24).margin({ right: 20 })



      Button('开关').fontSize(24).onClick(() => {

        click()

      })

    }.margin({bottom: 5})

  }

  @Builder myCheckBox() {

    Row() {

      Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})

        .select(true)

        .selectedColor(0xed6f21)

        .onChange((value: boolean) => {

          console.info('Checkbox1 change is'+ value)

        })

      Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})

        .select(false)

        .selectedColor(0x39a2db)

        .onChange((value: boolean) => {

          console.info('Checkbox2 change is'+ value)

        })

    }

  }



  build() {

    Row() {

      Column() {

        Text(this.message)

          .fontSize(24)

          .fontWeight(FontWeight.Bold).margin({ bottom: 20 })



        this.myBuilder('A', this.isA, () => {

          this.isA = !this.isA

        })



        this.myBuilder('B', this.isB, () => {

          this.isB = !this.isB

        })

        this.myCheckBox()

      }

      .width('100%')

    }

    .height('100%')

  }

}

5、@Extend

装饰内容为方法，@Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。

• 通过@Extend装饰器可以快速定义并复用组件的自定义样式，即对内置组件进行封装，增强复用性

• @Extend装饰器不能用在自定义组件struct定义框内。

  //给内置组件Text添加属性函数font 用于同时设置 字号，字体颜色，粗细

  @Extend(Text) function font (size: number, color: ResourceColor, weight: FontWeight) {
   
   

    .fontSize(size)

    .fontColor(