@Extend裝飾器：定義擴(kuò)展組件樣式

2024-01-25 12:02 更新

在前文的示例中，可以使用@Styles用于樣式的擴(kuò)展，在@Styles的基礎(chǔ)上，我們提供了@Extend，用于擴(kuò)展原生組件樣式。

說明

從API version 9開始，該裝飾器支持在ArkTS卡片中使用。

裝飾器使用說明

語法

  1. @Extend(UIComponentName) function functionName { ... }

使用規(guī)則

  • 和@Styles不同，@Extend僅支持定義在全局，不支持在組件內(nèi)部定義。
  • 和@Styles不同，@Extend支持封裝指定的組件的私有屬性和私有事件和預(yù)定義相同組件的@Extend的方法。
    1. // @Extend(Text)可以支持Text的私有屬性fontColor
    2. @Extend(Text) function fancy () {
    3.   .fontColor(Color.Red)
    4. }
    5. // superFancyText可以調(diào)用預(yù)定義的fancy
    6. @Extend(Text) function superFancyText(size:number) {
    7.     .fontSize(size)
    8.     .fancy()
    9. }
  • 和@Styles不同，@Extend裝飾的方法支持參數(shù)，開發(fā)者可以在調(diào)用時(shí)傳遞參數(shù)，調(diào)用遵循TS方法傳值調(diào)用。
    1. // xxx.ets
    2. @Extend(Text) function fancy (fontSize: number) {
    3.   .fontColor(Color.Red)
    4.   .fontSize(fontSize)
    5. }
    6. 

    7. @Entry
    8. @Component
    9. struct FancyUse {
    10.   build() {
    11.     Row({ space: 10 }) {
    12.       Text('Fancy')
    13.         .fancy(16)
    14.       Text('Fancy')
    15.         .fancy(24)
    16.     }
    17.   }
    18. }
  • @Extend裝飾的方法的參數(shù)可以為function，作為Event事件的句柄。
    1. @Extend(Text) function makeMeClick(onClick: () => void) {
    2.   .backgroundColor(Color.Blue)
    3.   .onClick(onClick)
    4. }
    5. 

    6. @Entry
    7. @Component
    8. struct FancyUse {
    9.   @State label: string = 'Hello World';
    10. 

    11.   onClickHandler() {
    12.     this.label = 'Hello ArkUI';
    13.   }
    14. 

    15.   build() {
    16.     Row({ space: 10 }) {
    17.       Text(`${this.label}`)
    18.         .makeMeClick(this.onClickHandler.bind(this))
    19.     }
    20.   }
    21. }
  • @Extend的參數(shù)可以為狀態(tài)變量，當(dāng)狀態(tài)變量改變時(shí)，UI可以正常的被刷新渲染。
    1. @Extend(Text) function fancy (fontSize: number) {
    2.   .fontColor(Color.Red)
    3.   .fontSize(fontSize)
    4. }
    5. 

    6. @Entry
    7. @Component
    8. struct FancyUse {
    9.   @State fontSizeValue: number = 20
    10.   build() {
    11.     Row({ space: 10 }) {
    12.       Text('Fancy')
    13.         .fancy(this.fontSizeValue)
    14.         .onClick(() => {
    15.           this.fontSizeValue = 30
    16.         })
    17.     }
    18.   }
    19. }

使用場景

以下示例聲明了3個(gè)Text組件，每個(gè)Text組件均設(shè)置了fontStyle、fontWeight和backgroundColor樣式。

  1. @Entry
  2. @Component
  3. struct FancyUse {
  4.   @State label: string = 'Hello World'
  5. 

  6.   build() {
  7.     Row({ space: 10 }) {
  8.       Text(`${this.label}`)
  9.         .fontStyle(FontStyle.Italic)
  10.         .fontWeight(100)
  11.         .backgroundColor(Color.Blue)
  12.       Text(`${this.label}`)
  13.         .fontStyle(FontStyle.Italic)
  14.         .fontWeight(200)
  15.         .backgroundColor(Color.Pink)
  16.       Text(`${this.label}`)
  17.         .fontStyle(FontStyle.Italic)
  18.         .fontWeight(300)
  19.         .backgroundColor(Color.Orange)
  20.     }.margin('20%')
  21.   }
  22. }

@Extend將樣式組合復(fù)用，示例如下。

  1. @Extend(Text) function fancyText(weightValue: number, color: Color) {
  2.   .fontStyle(FontStyle.Italic)
  3.   .fontWeight(weightValue)
  4.   .backgroundColor(color)
  5. }

通過@Extend組合樣式后，使得代碼更加簡潔，增強(qiáng)可讀性。

  1. @Entry
  2. @Component
  3. struct FancyUse {
  4.   @State label: string = 'Hello World'
  5. 

  6.   build() {
  7.     Row({ space: 10 }) {
  8.       Text(`${this.label}`)
  9.         .fancyText(100, Color.Blue)
  10.       Text(`${this.label}`)
  11.         .fancyText(200, Color.Pink)
  12.       Text(`${this.label}`)
  13.         .fancyText(300, Color.Orange)
  14.     }.margin('20%')
  15.   }
  16. }
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號