摘要
在鸿蒙 NEXT 开发中,@Builder
装饰器是一种轻量级的 UI 元素复用机制,它允许开发者将重复使用的 UI 元素抽象成一个方法,并在 build()
方法中多次调用,以实现 UI 结构的复用。以下是如何使用 @Builder
装饰器来优化 UI 组件复用的详细介绍和案例分析:
自定义构建函数
@Builder 方法可以定义在组件内或全局,用于封装可复用的 UI 结构。在组件内定义的 @Builder 方法可以通过 this 访问当前组件的属性和方法,而全局的 @Builder 方法则不能访问组件内部的属性和方法。
组件内 @Builder 方法:
@Entry
@Component
struct BuilderPage {
build() {
Column() {
Row({ space: 50 }) {
// 复用 UI 结构
this.compButtonBuilder($r('app.media.icon_edit'), '编辑', () => console.log('编辑'));
this.compButtonBuilder($r('app.media.icon_send'), '发送', () => console.log('发送'));
}
}.width('100%').height('100%').justifyContent(FlexAlign.Center);
}
// 定义 UI 结构
@Bui