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

@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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.