• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# wrapBuilder：封装全局@Builder
2
3
4 全局\@Builder作为wrapBuilder的参数返回WrappedBuilder对象，实现[全局\@Builder](arkts-builder.md#全局自定义构建函数)可以进行赋值和传递。
5
6
7> **说明：**
8>
9> 从API version 11开始使用。
10
11## 接口说明
12
13wrapBuilder是一个模板函数，返回一个`WrappedBuilder`对象。
14
15```ts
16declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;
17```
18同时 `WrappedBuilder`对象也是一个模板类。
19
20```ts
21declare class WrappedBuilder< Args extends Object[]> {
22  builder: (...args: Args) => void;
23
24  constructor(builder: (...args: Args) => void);
25}
26```
27
28
29>说明：模板参数`Args extends Object[]`是需要包装的builder函数的参数列表
30
31使用方法：
32
33```ts
34let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
35let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] //可以放入数组
36```
37
38
39
40## 限制条件
41
42wrapBuilder方法只能传入[全局\@Builder](arkts-builder.md#全局自定义构建函数)方法。
43
44wrapBuilder方法返回的WrappedBuilder对象的builder属性方法只能在struct内部使用。
45
46
47
48## 使用场景1
49
50将wrapBuilder赋值给globalBuilder，且把MyBuilder作为wrapBuilder参数，用来替代MyBuilder不能直接赋值给globalBuilder。
51
52```ts
53@Builder
54function MyBuilder(value: string, size: number) {
55  Text(value)
56    .fontSize(size)
57}
58
59let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
60
61@Entry
62@Component
63struct Index {
64  @State message: string = 'Hello World';
65
66  build() {
67    Row() {
68      Column() {
69        globalBuilder.builder(this.message, 50)
70      }
71      .width('100%')
72    }
73    .height('100%')
74  }
75}
76```
77
78## 使用场景2
79
80自定义组件Index使用ForEach来进行不同\@Builder函数的渲染，可以使用builderArr声明的wrapBuilder数组进行不同\@Builder函数效果体现。整体代码会较整洁。
81
82```
83@Builder
84function MyBuilder(value: string, size: number) {
85  Text(value)
86    .fontSize(size)
87}
88
89@Builder
90function YourBuilder(value: string, size: number) {
91  Text(value)
92    .fontSize(size)
93    .fontColor(Color.Pink)
94}
95
96const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];
97
98
99@Entry
100@Component
101struct Index {
102  @Builder testBuilder() {
103    ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
104      item.builder('Hello World', 30)
105    }
106
107    )
108  }
109
110  build() {
111    Row() {
112      Column() {
113        this.testBuilder()
114      }
115      .width('100%')
116    }
117    .height('100%')
118  }
119}
120```
121
122
123
124## 错误场景
125
126```
127function MyBuilder() {
128
129}
130
131// wrapBuilder必须传入被@Builder修饰的全局函数。
132const globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
133
134@Entry
135@Component
136struct Index {
137  @State message: string = 'Hello World';
138
139  build() {
140    Row() {
141      Column() {
142        Text(this.message)
143          .fontSize(50)
144          .fontWeight(FontWeight.Bold)
145        globalBuilder.builder(this.message, 30)
146      }
147      .width('100%')
148    }
149    .height('100%')
150  }
151}
152```
153
154