鸿蒙开发：走进stateStyles多态样式

前言

一个组件，多种状态下，我们如何实现呢？举一个很简单的案例，一个按钮，默认状态下是黑色背景，点击后是红色，手指放开后还原黑色。

我们自然而然的就会想到利用手势的按下和抬起，改变其背景颜色即可，代码如下：

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也可以实现其效果，无论哪种实现，我们都是要定义变量，改变某一个属性，有没有一种方式，直接更改属性呢？当然是有的，这就是stateStyles。

同样是上一个案例，我们使用stateStyles来实现一下，代码如下：

Button("点击")
        .stateStyles({
          pressed: { //按压
            .backgroundColor(Color.Red)
          },
          normal: { //正常态
            .backgroundColor(Color.Black)
          }
        })

可以发现，效果是和上述一模一样的。

简单概述

stateStyles为多态样式，可以依据组件的内部状态的不同，快速设置不同样式，比如背景颜色，颜色、大小等等常见的通用属性，此种行为，很类似于css中的伪类，但语法稍有不同，目前支持的有以下五种状态：

状态	概述
focused	获焦态
normal	正常态
pressed	按压态
disabled	不可用态
selected	选中态

实际场景

具体的场景主要适用于多状态的切换，比如前言中的案例，当然了，它是支持多个属性的，比如，我们再增加宽高属性：

Button("点击")
        .stateStyles({
          pressed: { //按压
            .backgroundColor(Color.Red)
            .width(200)
            .height(100)
          },
          normal: { //正常态
            .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
        })

总结

selected状态一般用于可选择的组件，比如Checkbox，比如Radio，目前支持的组件如下：

支持组件	支持的参数/属性	起始API版本
Checkbox	select	10
CheckboxGroup	selectAll	10
Radio	checked	10
Toggle	isOn	10
ListItem	selected	10
GridItem	selected	10
MenuItem	selected	10

简单案例：

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