鸿蒙OpenHarmony【wrapBuilder：封装全局@Builder】

当开发者在一个struct内使用了多个全局@Builder函数，来实现UI的不同结果时，多个全局@Builder函数会使代码维护起来非常困难，并且页面不整洁。此时，开发者可以使用wrapBuilder来封装全局@Builder。
   说明：
  从API version 11开始使用。
  当@Builder方法赋值给变量或者数组后，赋值的变量或者数组在UI方法中无法使用。

1. @Builder
2. function builderElement() {}
4. let builderArr: Function[] = [builderElement];
5. @Builder
6. function testBuilder() {
7.   ForEach(builderArr, (item: Function) => {
8.     item();
9.   })
10. }

复制代码

在上述代码中，builderArr是一个@Builder方法组成的数组， 在ForEach中取每一项@Builder方法时会出现@Builder方法在UI方法中无法使用的错误。
为了解决这一问题，引入wrapBuilder作为全局@Builder封装函数。wrapBuilder的参数返回WrappedBuilder对象，实现[全局@Builder]可以举行赋值和传递。
接口说明

wrapBuilder是一个模板函数，返回一个WrappedBuilder对象。

1. declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;

复制代码

同时 WrappedBuilder对象也是一个模板类。

1. declare class WrappedBuilder< Args extends Object[]> {
2.   builder: (...args: Args) => void;
4.   constructor(builder: (...args: Args) => void);
5. }

复制代码

  说明：模板参数Args extends Object[]是必要包装的builder函数的参数列表
  使用方法：

1. let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
2. let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] //可以放入数组

复制代码

限制条件

wrapBuilder方法只能传入[全局@Builder]方法。
wrapBuilder方法返回的WrappedBuilder对象的builder属性方法只能在struct内部使用。
@Builder方法赋值给变量

把@Builder装饰器装饰的方法MyBuilder作为wrapBuilder的参数，再将wrapBuilder赋值给变量globalBuilder，用来解决@Builder方法赋值给变量后无法被使用的问题。

1. @Builder
2. function MyBuilder(value: string, size: number) {
3.   Text(value)
4.     .fontSize(size)
5. }
7. let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
9. @Entry
10. @Component
11. struct Index {
12.   @State message: string = 'Hello World';
14.   build() {
15.     Row() {
16.       Column() {
17.         globalBuilder.builder(this.message, 50)
18.       }
19.       .width('100%')
20.     }
21.     .height('100%')
22.   }
23. }

复制代码

@Builder方法赋值给变量在UI语法中使用

自定义组件Index使用ForEach来举行不同@Builder函数的渲染，可以使用builderArr声明的wrapBuilder数组举行不同@Builder函数结果体现。整体代码会较整洁。

1. @Builder
2. function MyBuilder(value: string, size: number) {
3.   Text(value)
4.     .fontSize(size)
5. }
7. @Builder
8. function YourBuilder(value: string, size: number) {
9.   Text(value)
10.     .fontSize(size)
11.     .fontColor(Color.Pink)
12. }
14. const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];
17. @Entry
18. @Component
19. struct Index {
20.   @Builder testBuilder() {
21.     ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
22.       item.builder('Hello World', 30)
23.     }
25.     )
26.   }
28.   build() {
29.     Row() {
30.       Column() {
31.         this.testBuilder()
32.       }
33.       .width('100%')
34.     }
35.     .height('100%')
36.   }
37. }

复制代码

引用传递

通过按引用传递的方式传入参数，会触发UI的刷新。

1. class Tmp {
2.   paramA2: string = 'hello';
3. }
5. @Builder function overBuilder(param: Tmp) {
6.   Column(){
7.     Text(`wrapBuildervalue:${param.paramA2}`)
8.   }
9. }
11. const wBuilder: WrappedBuilder<[Tmp]> = wrapBuilder(overBuilder);
13. @Entry
14. @Component
15. struct Parent{
16.   @State label: Tmp = new Tmp();
17.   build(){
18.     Column(){
19.       wBuilder.builder({paramA2: this.label.paramA2})
20.       Button('Click me').onClick(() => {
21.         this.label.paramA2 = 'ArkUI';
22.       })
23.     }
24.   }
25. }

复制代码

错误场景

wrapBuilder必须传入被@Builder修饰的全局函数。

1. function MyBuilder() {
3. }
5. const globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
7. @Entry
8. @Component
9. struct Index {
10.   @State message: string = 'Hello World';
12.   build() {
13.     Row() {
14.       Column() {
15.         Text(this.message)
16.           .fontSize(50)
17.           .fontWeight(FontWeight.Bold)
18.         globalBuilder.builder(this.message, 30)
19.       }
20.       .width('100%')
21.     }
22.     .height('100%')
23.   }
24. }

复制代码

重复定义wrapBuilder失效

通过wrapBuilder(MyBuilderFirst)初始化定义builderObj之后，再次对builderObj举行赋值wrapBuilder(MyBuilderSecond)会不起作用，只生效第一次定义的wrapBuilder(MyBuilderFirst)。

1. @Builder
2. function MyBuilderFirst(value: string, size: number) {
3.   Text('MyBuilderFirst：' + value)
4.     .fontSize(size)
5. }
7. @Builder
8. function MyBuilderSecond(value: string, size: number) {
9.   Text('MyBuilderSecond：' + value)
10.     .fontSize(size)
11. }
13. interface BuilderModel {
14.   globalBuilder: WrappedBuilder<[string, number]>;
15. }
17. @Entry
18. @Component
19. struct Index {
20.   @State message: string = 'Hello World';
21.   @State builderObj: BuilderModel = { globalBuilder: wrapBuilder(MyBuilderFirst) };
23.   aboutToAppear(): void {
24.     setTimeout(() => {
25.       this.builderObj.globalBuilder = wrapBuilder(MyBuilderSecond);
26.     },1000)
27.   }
29.   build() {
30.     Row() {
31.       Column() {
32.         this.builderObj.globalBuilder.builder(this.message, 20)
33.       }
34.       .width('100%')
35.     }
36.     .height('100%')
37.   }
38. }

复制代码

到这里我们就基本上学完一个简单的技能，固然如果说要真正参与到鸿蒙的开发当中，要学的还有许多。各人可以看看下面这个鸿蒙入门到实战的学习技能路线图：

而随着鸿蒙的火热，现阶段已有许多Android、前端等开发者看中其未来趋势；想从网上查阅学习，但搜索到的鸿蒙资料都是七零八碎的，对此为了避免各人在学习过程中浪费过多时间，特地根据鸿蒙官方发布文档结合华为内部人员的分享，颠末反复修改整理得出：
整套鸿蒙（HarmonyOS NEXT）学习手册（共计1236页）与鸿蒙（HarmonyOS NEXT）开发入门&实战讲授视频（200集+）。
内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技能知识点。帮助各人在学习鸿蒙路上少走弯路！
《鸿蒙 (HarmonyOS NEXT)开发基础到实战手册》←嗱到全部

《鸿蒙开发基础》
ArkTS语言
安装DevEco Studio
运用你的第一个ArkTS应用
ArkUI声明式UI开发
.……
《鸿蒙开发进阶》
Stage模型入门
网络管理
数据管理
电话服务
分布式应用开发
关照与窗口管理
多媒体技能
安全技能
任务管理
WebGL
国际化开发
应用测试
DFX面向未来设计
鸿蒙体系移植和裁剪定制
……
《鸿蒙开发实战》
ArkTS实践
UIAbility应用
网络案例
……
《鸿蒙 (HarmonyOS NEXT)开发入门&实战讲授视频》←全部嗱到

现在的鸿蒙生态建设非常灵敏；就目前，鸿蒙生态设备数已超过8亿台，200多万开发者投入到鸿蒙生态，涵盖资讯、金融、交际、影音等众多领域。鸿蒙爆火的背后是举国支持，彰显了国家对科技崛起的渴望，自主自强不再受国外技能的打压。
并且鸿蒙是完全具备无与伦比的机会和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用必要开发，也就意味着必要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

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