• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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**
30>
31>The template parameter **Args extends Object[]** is a parameter list of the builder function to be wrapped.
32
33Example
34
35```ts
36let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
37let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] // An array is acceptable.
38```
39
40
41
42## Constraints
43
44**wrapBuilder** only accepts a [global \@Builder decorated function](arkts-builder.md#global-custom-builder-function) as its argument.
45
46Of the **WrappedBuilder** object it returns, the **builder** attribute method can be used only inside the struct.
47
48
49
50## Use Scenario 1
51
52In 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.
53
54```ts
55@Builder
56function MyBuilder(value: string, size: number) {
57  Text(value)
58    .fontSize(size)
59}
60
61let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
62
63@Entry
64@Component
65struct Index {
66  @State message: string = 'Hello World';
67
68  build() {
69    Row() {
70      Column() {
71        globalBuilder.builder(this.message, 50)
72      }
73      .width('100%')
74    }
75    .height('100%')
76  }
77}
78```
79
80## Use Scenario 2
81
82In 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.
83
84```
85@Builder
86function MyBuilder(value: string, size: number) {
87  Text(value)
88    .fontSize(size)
89}
90
91@Builder
92function YourBuilder(value: string, size: number) {
93  Text(value)
94    .fontSize(size)
95    .fontColor(Color.Pink)
96}
97
98const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];
99
100
101@Entry
102@Component
103struct Index {
104  @Builder testBuilder() {
105    ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
106      item.builder('Hello World', 30)
107    }
108
109    )
110  }
111
112  build() {
113    Row() {
114      Column() {
115        this.testBuilder()
116      }
117      .width('100%')
118    }
119    .height('100%')
120  }
121}
122```
123
124
125
126## Incorrect Usage
127
128```
129function MyBuilder() {
130
131}
132
133// wrapBuilder accepts only a global function decorated by @Builder.
134const globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
135
136@Entry
137@Component
138struct Index {
139  @State message: string = 'Hello World';
140
141  build() {
142    Row() {
143      Column() {
144        Text(this.message)
145          .fontSize(50)
146          .fontWeight(FontWeight.Bold)
147        globalBuilder.builder(this.message, 30)
148      }
149      .width('100%')
150    }
151    .height('100%')
152  }
153}
154```
155