stateStyles：多態(tài)樣式

2024-01-25 12:02 更新

@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)。

使用場(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%')
    }
  }
}