@Styles和@Extend僅僅應(yīng)用于靜態(tài)頁面的樣式復(fù)用，stateStyles可以依據(jù)組件的內(nèi)部狀態(tài)的不同，快速設(shè)置不同樣式。這就是我們本章要介紹的內(nèi)容stateStyles（又稱為：多態(tài)樣式）。

概述

stateStyles是屬性方法，可以根據(jù)UI內(nèi)部狀態(tài)來設(shè)置樣式，類似于css偽類，但語法不同。ArkUI提供以下五種狀態(tài)：

• focused：獲焦態(tài)。

• normal：正常態(tài)。

• pressed：按壓態(tài)。

• disabled：不可用態(tài)。

• selected10+：選中態(tài)。

使用場(chǎng)景

基礎(chǔ)場(chǎng)景

下面的示例展示了stateStyles最基本的使用場(chǎng)景。Button1處于第一個(gè)組件，Button2處于第二個(gè)組件。按壓時(shí)顯示為pressed態(tài)指定的黑色。使用Tab鍵走焦，先是Button1獲焦并顯示為focus態(tài)指定的粉色。當(dāng)Button2獲焦的時(shí)候，Button2顯示為focus態(tài)指定的粉色，Button1失焦顯示normal態(tài)指定的紅色。

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Button1')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Red)
          }
        })
        .margin(20)
      Button('Button2')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Red)
          }
        })
    }.margin('30%')
  }
}

圖1?獲焦態(tài)和按壓態(tài)??

@Styles和stateStyles聯(lián)合使用

以下示例通過@Styles指定stateStyles的不同狀態(tài)。

@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,
        })
    }
  }
}

圖2?正常態(tài)和按壓態(tài)??

在stateStyles里使用常規(guī)變量和狀態(tài)變量

stateStyles可以通過this綁定組件內(nèi)的常規(guī)變量和狀態(tài)變量。

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green

  build() {
    Column() {
      Button('clickMe').height(100).width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = Color.Pink
        })
        .margin('30%')
    }
  }
}

Button默認(rèn)normal態(tài)顯示綠色，第一次按下Tab鍵讓Button獲焦顯示為focus態(tài)的紅色，點(diǎn)擊事件觸發(fā)后，再次按下Tab鍵讓Button獲焦，focus態(tài)變?yōu)榉凵?/p>

圖3?點(diǎn)擊改變獲焦態(tài)樣式??

最后

有很多小伙伴不知道學(xué)習(xí)哪些鴻蒙開發(fā)技術(shù)？不知道需要重點(diǎn)掌握哪些鴻蒙應(yīng)用開發(fā)知識(shí)點(diǎn)？而且學(xué)習(xí)時(shí)頻繁踩坑，最終浪費(fèi)大量時(shí)間。所以有一份實(shí)用的鴻蒙（HarmonyOS NEXT）資料用來跟著學(xué)習(xí)是非常有必要的。?

這份鴻蒙（HarmonyOS NEXT）資料包含了鴻蒙開發(fā)必掌握的核心知識(shí)要點(diǎn)，內(nèi)容包含了（ArkTS、ArkUI開發(fā)組件、Stage模型、多端部署、分布式應(yīng)用開發(fā)、音頻、視頻、WebGL、OpenHarmony多媒體技術(shù)、Napi組件、OpenHarmony內(nèi)核、Harmony南向開發(fā)、鴻蒙項(xiàng)目實(shí)戰(zhàn)等等）鴻蒙（HarmonyOS NEXT）技術(shù)知識(shí)點(diǎn)。

希望這一份鴻蒙學(xué)習(xí)資料能夠給大家?guī)韼椭?，有需要的小伙伴自行領(lǐng)取，限時(shí)開源，先到先得~無套路領(lǐng)取?。?/strong>