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

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

前言

代码运行环境：全部基于HarmonyOs EXT

DevEco Studio：Build Version: 5.0..900

API：12

modelVersion：5.0.0

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

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

Button("点击")
        .backgroundColor()
        .onTouch((event: TouchEvent) => {
          if ( == TouchType.Down) {
             = Color.Red
          } else if ( == TouchType.Up) {
             = Color.Black
          }
        })

除了onTouch之外，gesture也可以实现其效果，无论哪种实现，我们都是要定义变量，改变某一个属性，有没有一种方式，直接更改属性呢？当然是有的，这就是stateStyles。

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

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

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

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

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

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

selected状态一般用于可选择的组件，比如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)
          },
        })