ArkTS學(xué)習(xí)筆記_封裝復(fù)用之@Styles裝飾器

• 背景：
  在開發(fā)中，如果每個(gè)組件的樣式都需要單獨(dú)設(shè)置，就會(huì)出現(xiàn)大量代碼在進(jìn)行重復(fù)樣式設(shè)置，雖然可以復(fù)制粘貼，但為了代碼簡(jiǎn)潔性和后續(xù)方便維護(hù)，給出的思路是：提煉和封裝相同的樣式成方法，方便復(fù)用調(diào)用，裝飾器@Style孕育而生。
• 作用:
  @Styles裝飾器可以將多條樣式設(shè)置，提煉成一個(gè)方法，直接在組件使用的位置調(diào)用即可復(fù)用。通過@Styles裝飾器可以快速定義并復(fù)用自定義樣式。用于快速定義并復(fù)用自定義樣式。

一、@Styles裝飾器使用說明

1. 當(dāng)前@Styles僅支持通用屬性和通用事件。
2. @Styles方法不支持參數(shù)，反例如下。

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

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

// 全局，前面添加function關(guān)鍵字
@Styles function functionName() { ... }// 在組件內(nèi)
@Component
struct FancyUse {// 組件內(nèi)部，不需要添加function關(guān)鍵字  @Styles fancy() {.height(100)}}

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

@Component
struct FancyUse {@State heightValue: number = 100@Styles fancy() {.height(this.heightValue) // 可是使用this指向組件本身，調(diào)用組件的狀態(tài) .backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200 // 可是使用this指向組件本身，給組件的狀態(tài)賦值 })}
}

5. 組件內(nèi)@Styles的優(yōu)先級(jí)高于全局@Styles?？蚣軆?yōu)先找當(dāng)前組件內(nèi)的@Styles，如果找不到，則會(huì)全局查找。

二、以下示例中演示了組件內(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 }) {Text('FancyA').globalFancy() // 和方法一樣，調(diào)用使用全局的@Styles封裝的樣式.fontSize(30)Text('FancyB').fancy() // 和方法一樣，使用組件內(nèi)的@Styles封裝的樣式.fontSize(30)}}
}