HarmonyOS应用开发-自定义组件中装饰器都有哪些？_harmony os 装饰器

在Java web开发中有@Controller、@Service等，称为注解。在HarmonyOS中有@Entry、@State等，称为装饰器。

装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。自定义组件中使用到的装饰器：

• @Entry表示该自定义组件为入口组件。
• @Component表示自定义组件。
• @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
• @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
• stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

管理组件状态时使用到的装饰器：

• @State表示组件中的状态变量，状态变量变化会触发UI刷新。
• @Prop装饰器：父子单向同步。
• @Link装饰器：父子双向同步。
• @Provide装饰器和@Consume装饰器：与后代组件双向同步。
• @Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化。

1 @Entry

@Entry在页面上使用，表示入口组件。在使用Previewer进行页面预览时，需要使用该装饰器（也可以使用@Preview）

2 @Component

自定义组件由@Component、struct、build()组成。

@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。

// 定义一个自定义组件MyComponent2
@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

// 在MyComponent中直接使用
@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

3 @Builder

将重复使用的UI元素抽象成一个方法，使用@Builder修饰，在build方法里调用。

按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

// 定义ABuilder，并接收一个参数
@Builder function ABuilder($$: { paramA1: string }) {
  Row() {
    Text(`UseStateVarByReference: ${$$.paramA1} `)
  }
}


@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // 在Parent组件中调用ABuilder的时候，将this.label引用传递给ABuilder
      ABuilder({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
        this.label = 'ArkUI';
      })
    }
  }
}

4 @BuilderParam

ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。

我理解在自定义组件A中可以定义一个变量，使用@BuilderParam装饰器修饰，在调用自定义组件A的时候，可传递一个@Builder修饰的变量。如下代码：

1. 定义自定义组件Child，该组件中aBuilder0使用@BuilderParam修饰
2. 在自定义组件Child的build()中构建aBuilder0
3. 在Parent中定义componentBuilder，并使用@Builder修饰
4. 在Parent调用Child时，传递一个参数，该参数为componentBuilder

@Component
struct Child {
  @BuilderParam aBuilder0: () => void;

  build() {
    Column() {
      this.aBuilder0()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`Parent builder `)
  }

  build() {
    Column() {
      Child({ aBuilder0: this.componentBuilder })
    }
  }
}

5 @Styles

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。

通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

6 @Extend

在@Styles的基础上，提供了@Extend，用于扩展原生组件样式。

@Styles不同，@Extend装饰的方法支持参数

// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {


**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/08e8a8071f0e0d055b3d2df0ad6cbdf3.png)
![img](https://img-blog.csdnimg.cn/img_convert/56d9851c10a6510332c87f39a0778ad1.png)
![img](https://img-blog.csdnimg.cn/img_convert/99eb4c706d836c2d0c14811cca8a432f.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
![img](https://img-blog.csdnimg.cn/img_convert/20d3ce6a5728e2d26c890bbb39f581a9.png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
[外链图片转存中...(img-eb64dtCi-1712845223555)]

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**