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

最新推荐文章于 2025-03-31 20:05:48 发布

2401_84853282

最新推荐文章于 2025-03-31 20:05:48 发布

阅读量683

点赞数 10

文章标签：鸿蒙面试学习

本文链接：https://blog.youkuaiyun.com/2401_84853282/article/details/138940626

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

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

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修饰的变量。如下代码：

定义自定义组件Child，该组件中aBuilder0使用@BuilderParam修饰
在自定义组件Child的build()中构建aBuilder0
在Parent中定义componentBuilder，并使用@Builder修饰
在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() {


![img](https://i-blog.csdnimg.cn/blog_migrate/e2b31eb1cf8384ac23fc344d6d92b641.png)
![img](https://img-blog.csdnimg.cn/img_convert/0c80f26902f68366e0d1487887bdbb95.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618636735)**


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

，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618636735)**


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