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

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

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

// 定義在全局的@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)
    }
  }
}