#鸿蒙通关秘籍#如何在鸿蒙 NEXT 中使用 @Builder 装饰器进行创建自定义组件？

在鸿蒙 NEXT 中，可以通过 @Builder 装饰器来定义可复用的 UI 组件。这样可以减少代码重复性，提高开发效率。这里是组件内 @Builder 方法的使用实例，它允许复用 UI 结构：

@Entry
@Component
struct BuilderPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        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);
  }

  @Builder compButtonBuilder(icon: Resource, text: string, callback: () => void) {
    Button() {
      Row({ space: 10 }) {
        Image(icon).width(25).height(25);
        Text(text).fontColor(Color.White).fontSize(25);
      }
    }.width(120).height(50).onClick(callback);
  }
}