一、核心概念解析
1. @Builder装饰器:UI复用的基石
2. @LocalBuilder装饰器:父子层级维护者
3. @BuilderParam装饰器:动态插槽实现者
4. wrapBuilder技术:构建器增强器
-
定义:用于封装全局
@Builder
函数为可存储对象,支持动态调用。
-
特性:
-
对象化封装:将全局构建函数转为
WrappedBuilder
对象。
-
动态调用:支持存入数组并通过
ForEach
动态渲染。
-
示例:
// 封装全局构建函数
const wrappedBuilders = [
wrapBuilder(HeaderBuilder),
wrapBuilder(FooterBuilder)
]
@Entry
@Component
struct MainPage {
build() {
Column() {
ForEach(wrappedBuilders, (builder) => {
builder.builder("动态标题")
})
}
}
}
二、四者对比分析表
维度 |
@Builder |
@LocalBuilder |
@BuilderParam |
wrapBuilder |
核心功能 |
UI复用 |
维护父子层级关系 |
动态插槽 |
构建器对象化封装 |
作用域 |
组件内/全局 |
组件内 |
跨组件 |
全局构建函数专用 |
状态访问 |
直接访问组件状态 |
继承父组件状态 |
依赖参数传递 |
不直接处理状态 |
参数传递 |
值/引用传递 |
自动继承上下文 |
严格类型匹配 |
支持值/引用类型参数 |
典型场景 |
通用UI模板 |
动态列表项/条件渲染 |
可配置组件 |
动态构建器数组调用 |
初始化限制 |
无 |
必须组件内定义 |
需用@Builder 函数初始化 |
仅支持全局@Builder 封装 |
三、进阶应用模式
1. 组合式构建
// 全局构建函数 + 构建器增强
function ThemedButton(builder: () => Button) {
return () => {
const button = builder();
button.backgroundColor(Color.Primary);
return button;
};
}
@Builder
function DefaultButton(text: string) {
return ThemedButton(() => Button(text));
}
2. 层级化动态渲染
@Component
struct NestedComponent {
@LocalBuilder
renderItem(item: string) {
Text(item).fontSize(18);
}
build() {
Column() {
ForEach(this.items, (item) => this.renderItem(item));
}
}
}
3. 插槽与状态联动
@Component
struct StatefulCard {
@State message: string = "初始消息";
@BuilderParam content: (message: string) => void;
build() {
Column() {
this.content(this.message);
Button("更新消息").onClick(() => this.message = "新消息");
}
}
}
四、总结
-
@Builder:适用于模块化UI复用,通过参数传递策略平衡灵活性与性能。
-
@LocalBuilder:解决父子组件层级关系问题,适合动态内容插入。
-
@BuilderParam:实现组件插槽机制,提升UI组合能力。
-
wrapBuilder:动态构建器调用的终极方案,特别适合可视化搭建场景。
我是今阳,如果想要进阶和了解更多的干货,欢迎关注wxgzh “今阳说” 接收我的最新文章
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。