如果每個元件的樣式都需要單獨設定，在開發過程中會出現大量程式碼在進行重複樣式設定，雖然可以複製貼上，但為了程式碼簡潔性和後續方便維護，我們推出了可以提煉公共樣式進行復用的裝飾器@Styles。

@Styles裝飾器可以將多條樣式設定提煉成一個方法，直接在元件宣告的位置呼叫。透過@Styles裝飾器可以快速定義並複用自定義樣式。用於快速定義並複用自定義樣式。

說明：

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

裝飾器使用說明

● @Styles方法不支援引數，反例如下。

// 反例： @Styles不支援引數
@Styles function globalFancy (value: number) {
  .width(value)
}

● @Styles可以定義在元件內或全域性，在全域性定義時需在方法名前面新增function關鍵字，元件內定義時則不需要新增function關鍵字。

// 全域性
@Styles function functionName() { ... }
// 在元件內
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}

● 定義在元件內的@Styles可以透過this訪問元件的常量和狀態變數，並可以在@Styles裡透過事件來改變狀態變數的值，示例如下：

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

● 元件內@Styles的優先順序高於全域性@Styles。框架優先找當前元件內的@Styles，如果找不到，則會全域性查詢。

使用場景

以下示例中演示了元件內@Styles和全域性@Styles的用法。

// 定義在全域性的@Styles封裝的樣式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}
@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定義在元件內的@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)
      // 使用元件內的@Styles封裝的樣式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

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

裝飾器使用說明

使用場景

相關文章