1、裝飾器

裝飾器是用于裝飾類、結(jié)構(gòu)、方法以及變量，并賦予其特殊的含義。如：

• @Component表示自定義組件
• @Entry表示該自定義組件為入口組件
• @State表示組件中的狀態(tài)變量，狀態(tài)變量變化會(huì)觸發(fā)UI刷新。

2 、語法范式

• @Builder/@BuilderParam：特殊的封裝UI描述的方法，細(xì)粒度的封裝和復(fù)用UI描述，如抽取組件。

build() {Column() {Scroll() {Column() {this.LoginButton()}}.width(Constants.MATCH_PARENT).backgroundColor($r('app.color.app_background')).padding(15)}@Builder LoginButton() {Button($r('app.string.login')).width(Constants.MATCH_PARENT).height(40).borderRadius(20).fontSize(16).margin({ top: 50 }).fontWeight(500).enabled(true).fontColor(Color.White).backgroundColor($r('app.color.blue')).onClick(() => {})}

• @Extend/@Style：擴(kuò)展內(nèi)置組件和封裝屬性樣式，更靈活地組合內(nèi)置組件。

  @Extend 和 @Style的區(qū)別：

  1. 和@Styles不同，@Extend僅支持定義在全局，不支持在組件內(nèi)部定義。
  2. 和@Styles不同，@Extend支持封裝指定的組件的私有屬性和私有事件和預(yù)定義相同組件的@Extend的方法。
  3. 和@Styles不同，@Extend裝飾的方法支持參數(shù)，開發(fā)者可以在調(diào)用時(shí)傳遞參數(shù)，調(diào)用遵循TS方法傳值調(diào)用。
  4. @Extend裝飾的方法的參數(shù)可以為function，作為Event事件的句柄。
  5. @Extend的參數(shù)可以為狀態(tài)變量，當(dāng)狀態(tài)變量改變時(shí)，UI可以正常的被刷新渲染。
  6. @Styles方法不支持參數(shù)。
  7. @Styles可以定義在組件內(nèi)或全局，在全局定義時(shí)需在方法名前面添加function關(guān)鍵字，組件內(nèi)定義時(shí)則不需要添加function關(guān)鍵字。
  8. 定義在組件內(nèi)的@Styles可以通過this訪問組件的常量和狀態(tài)變量，并可以在@Styles里通過事件來改變狀態(tài)變量的值。
  9. 組件內(nèi)@Styles的優(yōu)先級高于全局@Styles?？蚣軆?yōu)先找當(dāng)前組件內(nèi)的@Styles，如果找不到，則會(huì)全局查找。

// xxx.ets
@Extend(Text) function textStyle (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
}// 定義在全局的@Styles封裝的樣式
@Styles function globalText() {.width(150).height(100).backgroundColor(Color.Pink)
}@Entry
@Component
struct ExtendPage {build() {Row({ space: 10 }) {Text('Extend').textStyle(16)Text('Style').globalText().fontSize(30)}}
}

• stateStyles：多態(tài)樣式，可以依據(jù)組件的內(nèi)部狀態(tài)的不同，設(shè)置不同樣式。

  stateStyles是屬性方法，可以根據(jù)UI內(nèi)部狀態(tài)來設(shè)置樣式。ArkUI提供以下四種狀態(tài)：

  1. focused：獲焦?fàn)顟B(tài)。
  2. normal：正常狀態(tài)。
  3. pressed：按壓狀態(tài)。
  4. disabled：不可用狀態(tài)。

// @Styles和stateStyles聯(lián)合使用@Entry
@Component
struct MyComponent {@Styles normalStyle() {.backgroundColor(Color.Gray)}@Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Text('Text1').fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}