前言

一個組件，多種狀態(tài)下掏缎，我們?nèi)绾螌崿F(xiàn)呢皱蹦？舉一個很簡單的案例煤杀，一個按鈕眷蜈，默認狀態(tài)下是黑色背景，點擊后是紅色沈自，手指放開后還原黑色酌儒。

我們自然而然的就會想到利用手勢的按下和抬起，改變其背景顏色即可枯途，代碼如下：

Button("點擊")
        .backgroundColor(this.clickBackgroundColor)
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.clickBackgroundColor = Color.Red
          } else if (event.type == TouchType.Up) {
            this.clickBackgroundColor = Color.Black
          }
        })

除了onTouch之外忌怎，gesture也可以實現(xiàn)其效果籍滴，無論哪種實現(xiàn)，我們都是要定義變量榴啸，改變某一個屬性孽惰，有沒有一種方式，直接更改屬性呢鸥印？當(dāng)然是有的勋功，這就是stateStyles。

同樣是上一個案例库说，我們使用stateStyles來實現(xiàn)一下狂鞋，代碼如下：

Button("點擊")
        .stateStyles({
          pressed: { //按壓
            .backgroundColor(Color.Red)
          },
          normal: { //正常態(tài)
            .backgroundColor(Color.Black)
          }
        })

可以發(fā)現(xiàn)，效果是和上述一模一樣的潜的。

簡單概述

stateStyles為多態(tài)樣式骚揍，可以依據(jù)組件的內(nèi)部狀態(tài)的不同，快速設(shè)置不同樣式啰挪，比如背景顏色信不，顏色吊说、大小等等常見的通用屬性洞豁，此種行為趣兄，很類似于css中的偽類痰腮，但語法稍有不同舅巷，目前支持的有以下五種狀態(tài)：

實際場景

具體的場景主要適用于多狀態(tài)的切換首有，比如前言中的案例砰左，當(dāng)然了衫画，它是支持多個屬性的歇由，比如卵牍，我們再增加寬高屬性：

Button("點擊")
        .stateStyles({
          pressed: { //按壓
            .backgroundColor(Color.Red)
            .width(200)
            .height(100)
          },
          normal: { //正常態(tài)
            .backgroundColor(Color.Black)
            .width(100)
            .height(50)
          }
        })

除了多個屬性之外，另外也可以直接傳遞樣式：

定義Styles：

@Styles
  normalStyle() {
    .backgroundColor(Color.Black)
    .width(100)
    .height(50)
  }

  @Styles
  pressedStyle() {
    .backgroundColor(Color.Red)
    .width(200)
    .height(100)
  }

使用Styles：

Button("點擊")
        .stateStyles({
          pressed: this.pressedStyle,
          normal: this.normalStyle
        })

總結(jié)

selected狀態(tài)一般用于可選擇的組件沦泌，比如Checkbox糊昙，比如Radio，目前支持的組件如下：

簡單案例：

Radio({ value: 'Radio1', group: 'radioGroup1' })
        .checked(this.value)
        .height(50)
        .width(50)
        .borderRadius(50)
        .radioStyle({ checkedBackgroundColor: Color.Red })
        .onClick(() => {
          this.value = !this.value
        })
        .stateStyles({
          normal: {
            .backgroundColor(Color.Black)
          },
          selected: {
            .backgroundColor(Color.Red)
          },
        })