【中秋國慶不斷更】OpenHarmony多態樣式stateStyles使用場景

@Styles和@Extend僅僅應用於靜態頁面的樣式復用，stateStyles可以依據組件的內部狀態的不同，快速設置不同樣式。這就是我們本章要介紹的內容stateStyles（又稱為：多態樣式）。

概述

stateStyles是屬性方法，可以根據UI內部狀態來設置樣式，類似於css偽類，但語法不同。ArkUI提供以下四種狀態：

​ ● focused：獲焦態。

​ ● normal：正常態。

​ ● pressed：按壓態。

​ ● disabled：不可用態。

​ ● selected10+：選中態。

使用場景

基礎場景

下麵的示例展示了stateStyles最基本的使用場景。Button處於第一個組件，預設獲焦，生效focused指定的粉色樣式。按壓時顯示為pressed態指定的黑色。如果在Button前再放一個組件，使其不處於獲焦態，就會生效normal態的黃色。

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Click me')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Yellow)
          }
        })
    }.margin('30%')
  }
}

圖1 獲焦態和按壓態

@Styles和stateStyles聯合使用

以下示例通過@Styles指定stateStyles的不同狀態。

@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 正常態和按壓態

在stateStyles里使用常規變數和狀態變數

stateStyles可以通過this綁定組件內的常規變數和狀態變數。

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

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

Button預設獲焦顯示紅色，點擊事件觸發後，獲焦態變為粉色。

圖3 點擊改變獲焦態樣式

本文由博客一文多發平臺 OpenWrite 發佈！