OpenHarmony自定義組件

自定義組件

@Builder

可通過(guò)@Builder裝飾器進(jìn)行描述，該裝飾器可以修飾一個(gè)函數(shù)，此函數(shù)可以在build函數(shù)之外聲明，并在build函數(shù)中或其他@Builder修飾的函數(shù)中使用，從而實(shí)現(xiàn)在一個(gè)自定義組件內(nèi)快速生成多個(gè)布局內(nèi)容。

@BuilderParam

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

當(dāng)開(kāi)發(fā)者在自定義組件中添加一個(gè)點(diǎn)擊跳轉(zhuǎn)操作。若直接在組件內(nèi)嵌入事件方法，將會(huì)導(dǎo)致所有引入該自定義組件的地方均增加了該功能。為解決此問(wèn)題，引入了@BuilderParam裝飾器，此裝飾器修飾的屬性值可為@Builder裝飾的函數(shù)，開(kāi)發(fā)者可在初始化自定義組件時(shí)對(duì)此屬性進(jìn)行賦值，為自定義組件增加特定的功能。

@Styles

ArkTS為了避免開(kāi)發(fā)者對(duì)重復(fù)樣式的設(shè)置，通過(guò)@Styles裝飾器可以將多個(gè)樣式設(shè)置提煉成一個(gè)方法，直接在組件聲明時(shí)調(diào)用，通過(guò)@Styles裝飾器可以快速定義并復(fù)用自定義樣式。當(dāng)前@Styles僅支持通用屬性。

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

@Extend

@Extend裝飾器將新的屬性方法添加到Text、Column、Button等內(nèi)置組件上，通過(guò)@Extend裝飾器可以快速地?cái)U(kuò)展原生組件。注意的是@Extend不能定義在自定義組件struct內(nèi)。

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

@CustomDialog

@CustomDialog裝飾器用于裝飾自定義彈窗組件，使得彈窗可以動(dòng)態(tài)設(shè)置內(nèi)容及樣式。

?
@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%')
  }
}

審核編輯：湯梓紅