【HarmonyOS 4.0】@BuilderParam 装饰器

1. @BuilderParam 装饰器

   

• @BuilderParam 装饰器用于装饰自界说组件(struct)中的属性，其装饰的属性可作为一个UI布局的占位符，待创建该组件时，可通过参数为其传入详细的内容。
  
• 参数必须满足俩个条件：
  2.1 参数类型必须是个函数；
  2.2 参数必须是个UI布局；
  
• 因此这个参数就是 @Builder 方法
  
• 
  
  
• 使用所属自界说组件的自界说构建函数或者全局自界说构建函数，必要在当地初始化@BuilderParam。
  

1. @Builder
2. function GlobalDoNothingBuilder(): void {
3. }
4. @BuilderParam stateComp: () => void = GlobalDoNothingBuilder

复制代码

1.1 代码案例如下：

1. // 第一个Builder
2. @Builder
3. export function imageBuilder() {
4.   Column({ space: 10 }) {
5.     Image($r('app.media.app_icon'))
6.       .width('70%')
7.       .height('70%')
8.       .objectFit(ImageFit.Contain)
9.     Text('@BuilderParam装饰器：引用@Builder函数')
10.       .fontSize(16)
11.       .fontWeight(FontWeight.Bold)
12.   }
13. }
15. // 第二个Builder
16. @Builder
17. export function textBuilder() {
18.   Column({ space: 10 }) {
19.     Text('@BuilderParam装饰器：引用@Builder函数')
20.       .fontSize(16)
21.       .fontWeight(FontWeight.Bold)
22.     Text('当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。')
23.       .fontSize(14)
24.       .textOverflow({ overflow: TextOverflow.Ellipsis })
25.       .maxLines(6)
26.   }
27. }
29. // 自定义子组件
30. import { textBuilder } from './TextBuilder'
32. @Extend(Column)
33. function columnStyle() {
34.   .width('90%')
35.   .height(180)
36.   .borderRadius(10)
37.   .shadow({ radius: 20 })
38.   .padding(10)
39. }
41. @Component
42. export struct Card {
43.   @BuilderParam content: () => void = textBuilder
45.   build() {
46.     Column({ space: 20 }) {
47.       Column() {
48.         this.content()
49.       }
50.       .columnStyle()
51.     }
52.   }
53. }
55. // 父组件
56. import { imageBuilder } from "./ImageBuilder"
57. import { textBuilder } from './TextBuilder'
58. import { Card } from "./Card"
60. @Entry
61. @Component
62. struct Index {
63.   private scroller: Scroller = new Scroller()
65.   build() {
66.     Scroll(this.scroller) {
67.       Column({ space: 20 }) {
68.         Card({ content: imageBuilder })
69.         Card({ content: textBuilder })
70.         Divider()
71.         Card({ content: textBuilder })
72.         Card({ content: imageBuilder })
73.       }
74.       .width('100%')
75.     }
76.   }
77. }

复制代码

1.2 如果一个组件只界说一个 @BuilderParam 属性，那么创建该组件时，也可直接通过“子组件”的方式传入详细的UI布局。

1. // 子组件
2. @Extend(Column)
3. function columnStyle() {
4.   .width('90%')
5.   .height(180)
6.   .borderRadius(10)
7.   .shadow({ radius: 20 })
8.   .padding(10)
9. }
11. @Component
12. export struct Card {
13.   @BuilderParam content: () => void
15.   build() {
16.     Column({ space: 20 }) {
17.       Column() {
18.         this.content()
19.       }
20.       .columnStyle()
21.     }
22.   }
23. }
25. // 父组件
26. import { Card } from "./Card"
28. @Entry
29. @Component
30. struct Index {
31.   build() {
32.     Column({ space: 20 }) {
33.       Card() {
34.         Column({ space: 10 }) {
35.           Image($r('app.media.app_icon'))
36.             .width('70%')
37.             .height('70%')
38.             .objectFit(ImageFit.Contain)
39.           Text('@BuilderParam装饰器：引用@Builder函数')
40.             .fontSize(16)
41.             .fontWeight(FontWeight.Bold)
42.         }
43.       }
44.     }
45.     .height('100%')
46.     .width('100%')
47.   }
48. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。