@Styles裝飾器：定義組件重用樣式

2024-01-25 12:01 更新

如果每個組件的樣式都需要單獨設(shè)置，在開發(fā)過程中會出現(xiàn)大量代碼在進行重復(fù)樣式設(shè)置，雖然可以復(fù)制粘貼，但為了代碼簡潔性和后續(xù)方便維護，我們推出了可以提煉公共樣式進行復(fù)用的裝飾器@Styles。

@Styles裝飾器可以將多條樣式設(shè)置提煉成一個方法，直接在組件聲明的位置調(diào)用。通過@Styles裝飾器可以快速定義并復(fù)用自定義樣式。用于快速定義并復(fù)用自定義樣式。

說明

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

裝飾器使用說明

當前@Styles僅支持通用屬性和通用事件。

@Styles方法不支持參數(shù)，反例如下。


// 反例： @Styles不支持參數(shù)
@Styles function globalFancy (value: number) {
  .width(value)
}

@Styles可以定義在組件內(nèi)或全局，在全局定義時需在方法名前面添加function關(guān)鍵字，組件內(nèi)定義時則不需要添加function關(guān)鍵字。
```
// 全局
@Styles function functionName() { ... }

// 在組件內(nèi)
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}
```

定義在組件內(nèi)的@Styles可以通過this訪問組件的常量和狀態(tài)變量，并可以在@Styles里通過事件來改變狀態(tài)變量的值，示例如下：


@Component
struct FancyUse {
  @State heightValue: number = 100
  @Styles fancy() {
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }
}

組件內(nèi)@Styles的優(yōu)先級高于全局@Styles。
框架優(yōu)先找當前組件內(nèi)的@Styles，如果找不到，則會全局查找。

使用場景

以下示例中演示了組件內(nèi)@Styles和全局@Styles的用法。


// 定義在全局的@Styles封裝的樣式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定義在組件內(nèi)的@Styles封裝的樣式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封裝的樣式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用組件內(nèi)的@Styles封裝的樣式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

以上內(nèi)容是否對您有幫助：

← @BuilderParam裝飾器：引用@Builder函數(shù)

@Extend裝飾器：定義擴展組件樣式 →

寫筆記

我要補充

@Styles裝飾器：定義組件重用樣式

裝飾器使用說明

使用場景

推薦文章

推薦教程

推薦課程