自定義組件

@Builder

可通過@Builder裝飾器進行描述，該裝飾器可以修飾一個函數，此函數可以在build函數之外聲明，并在build函數中或其他@Builder修飾的函數中使用，從而實現在一個自定義組件內快速生成多個布局內容。

@BuilderParam

@BuilderParam裝飾器用于修飾自定義組件內函數類型的屬性（例如： @BuilderParam noParam: () => void），并且在初始化自定義組件時被@BuilderParam修飾的屬性必須賦值。

當開發者在自定義組件中添加一個點擊跳轉操作。若直接在組件內嵌入事件方法，將會導致所有引入該自定義組件的地方均增加了該功能。為解決此問題，引入了@BuilderParam裝飾器，此裝飾器修飾的屬性值可為@Builder裝飾的函數，開發者可在初始化自定義組件時對此屬性進行賦值，為自定義組件增加特定的功能。

@Styles

ArkTS為了避免開發者對重復樣式的設置，通過@Styles裝飾器可以將多個樣式設置提煉成一個方法，直接在組件聲明時調用，通過@Styles裝飾器可以快速定義并復用自定義樣式。當前@Styles僅支持通用屬性。

@Styles function globalFancy () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}
?
Text('堅果')
        .globalFancy()
        .fontSize(30)

@Extend

@Extend裝飾器將新的屬性方法添加到Text、Column、Button等內置組件上，通過@Extend裝飾器可以快速地擴展原生組件。注意的是@Extend不能定義在自定義組件struct內。

// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
  .fontStyle(FontStyle.Italic)
  .fontWeight(600)
}
?
Text("堅果")
        .fancy(24)

@CustomDialog

@CustomDialog裝飾器用于裝飾自定義彈窗組件，使得彈窗可以動態設置內容及樣式。

?
@CustomDialog
struct DialogExample {
  controller: CustomDialogController
  action: () => void
?
  build() {
    Row() {
      Button('自定義dialog')
        .onClick(() => {
          this.controller.close()
          this.action()
        })
    }.padding(20)
  }
}
?
?
@Entry
@Component
struct AboutPage {
  @State message: string = 'Hello World'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: DialogExample({ action: this.onAccept }),
    cancel: this.existDialog,
    autoCancel: true
  });
  onAccept() {
    console.info('onAccept');
  }
?
  existDialog() {
    console.info('Cancel dialog!');
  }
?
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold) .onClick(() => {
          this.dialogController.open()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

審核編輯：湯梓紅