[一、基本語法]8stateStyles：多型樣式

为敢技术發表於2024-06-28
多型

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

概述

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

  • focused：獲焦態。
  • normal：正常態。
  • pressed：按壓態。
  • disabled：不可用態。

使用場景

基礎場景

下面的示例展示了stateStyles最基本的使用場景。Button1處於第一個元件，Button2處於第二個元件。按壓時顯示為pressed態指定的黑色。使用Tab鍵走焦，先是Button1獲焦並顯示為focus態指定的粉色。當Button2獲焦的時候，Button2顯示為focus態指定的粉色，Button1失焦顯示normal態指定的紅色。

@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 獲焦態和按壓態

@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() {
    Column() {
      Button('clickMe').height(100).width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = Color.Pink
        })
        .margin('30%')
    }
  }
}

Button預設normal態顯示綠色，第一次按下Tab鍵讓Button獲焦顯示為focus態的紅色，點選事件觸發後，再次按下Tab鍵讓Button獲焦，focus態變為粉色。

圖3 點選改變獲焦態樣式

相關文章