1# wrapBuilder: Encapsulating Global @Builder
2
3
4 **wrapBuilder** is a template function that accepts a [global \@Builder decorated function](arkts-builder.md#global-custom-builder-function) as its argument and returns a **WrappedBuilder** object, thereby allowing global \@Builder decorated function to be assigned a value and transferred.
5
6
7> **NOTE**
8>
9> This API is supported since API version 11.
10
11## Available APIs
12
13**wrapBuilder** is a template function that returns a **WrappedBuilder** object.
14
15```ts
16declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;
17```
18The **WrappedBuilder** object is also a template class.
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>**NOTE**<br>The template parameter **Args extends Object[]** is a parameter list of the builder function to be wrapped.
30
31Example:
32
33```ts
34let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
35let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] // An array is acceptable.
36```
37
38## Constraints
39
40**wrapBuilder** only accepts a [global \@Builder decorated function](arkts-builder.md#global-custom-builder-function) as its argument.
41
42Of the **WrappedBuilder** object it returns, the **builder** attribute method can be used only inside the struct.
43
44## Use Scenario 1
45
46In this example, **wrapBuilder** is assigned to **globalBuilder**, and **MyBuilder** is passed in to **wrapBuilder** as its input parameter. In this way, **MyBuilder** is assigned to **globalBuilder** indirectly.
47
48```ts
49@Builder
50function MyBuilder(value: string, size: number) {
51  Text(value)
52    .fontSize(size)
53}
54
55let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
56
57@Entry
58@Component
59struct Index {
60  @State message: string = 'Hello World';
61
62  build() {
63    Row() {
64      Column() {
65        globalBuilder.builder(this.message, 50)
66      }
67      .width('100%')
68    }
69    .height('100%')
70  }
71}
72```
73
74## Use Scenario 2
75
76In this example, the custom component **Index** uses **ForEach** to render different \@Builder functions. You can use the **wrapBuilder** array declared in **builderArr** to present different \@Builder function effects. In this way, the code is neat.
77
78```
79@Builder
80function MyBuilder(value: string, size: number) {
81  Text(value)
82    .fontSize(size)
83}
84
85@Builder
86function YourBuilder(value: string, size: number) {
87  Text(value)
88    .fontSize(size)
89    .fontColor(Color.Pink)
90}
91
92const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];
93
94
95@Entry
96@Component
97struct Index {
98  @Builder testBuilder() {
99    ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
100      item.builder('Hello World', 30)
101    }
102
103    )
104  }
105
106  build() {
107    Row() {
108      Column() {
109        this.testBuilder()
110      }
111      .width('100%')
112    }
113    .height('100%')
114  }
115}
116```
117
118## Use Scenario 3
119
120If parameters are passed in by reference, the UI re-rendering is triggered.
121
122```ts
123class Tmp {
124  paramA2: string = 'hello';
125}
126
127@Builder function overBuilder(param: Tmp) {
128  Column(){
129    Text(`wrapBuildervalue:${param.paramA2}`)
130  }
131}
132
133const wBuilder: WrappedBuilder<[Tmp]> = wrapBuilder(overBuilder);
134
135@Entry
136@Component
137struct Parent{
138  @State label: Tmp = new Tmp();
139  build(){
140    Column(){
141      wBuilder.builder({paramA2: this.label.paramA2})
142      Button('Click me').onClick(() => {
143        this.label.paramA2 = 'ArkUI';
144      })
145    }
146  }
147}
148```
149
150## Incorrect Usage
151
152```
153function MyBuilder() {
154
155}
156
157// wrapBuilder accepts only a global function decorated by @Builder.
158const globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
159
160@Entry
161@Component
162struct Index {
163  @State message: string = 'Hello World';
164
165  build() {
166    Row() {
167      Column() {
168        Text(this.message)
169          .fontSize(50)
170          .fontWeight(FontWeight.Bold)
171        globalBuilder.builder(this.message, 30)
172      }
173      .width('100%')
174    }
175    .height('100%')
176  }
177}
178```
179