鸿蒙开发走进多态样式stateStyles

本文基于HarmonyOSApi14

在开发中，有这样一个案例，说的是有一条条目，默认无操作状态下是一个背景颜色，手指点击后改变为另一个背景颜色，当手指松开后又还原为默认的背景颜色，我们该如何实现呢？

有的同学可能会说了，这还不是手拿把掐，利用onTouch事件就可以轻松搞定啊，手指按下就改变背景，手指抬起就还原背景，代码如下：

Column() {
        Text("我是一个普通的条目")
          .fontColor(Color.White)
      }
      .width("100%")
      .height(100)
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(this.itemBgColor)
      .onTouch((event) => {
        if (event.type == TouchType.Down) {
          this.itemBgColor = Color.Pink
        } else if (event.type == TouchType.Up) {
          this.itemBgColor = Color.Gray
        }
      })

实际运行后效果：

哎，还别说，还真实现了这个效果，如果不仅仅是背景颜色呢，也许在实际的开发中会有很多个属性的改变，比如宽高，边距等等，那么我们就需要很多个属性进行赋值，此种写法上，除了实现onTouch方法，还需要定义可变化的变量才能切换我们的状态，代码上显得稍显冗余，有没有一种简洁的方式，直接更改属性呢，当然是有的，这就是stateStyles。

我们把以上的代码，使用stateStyles来实现一下，代码如下：

Column() {
        Text("我是一个普通的条目")
          .fontColor(Color.White)
      }
      .width("100%")
      .height(100)
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .stateStyles({
        pressed: { //按压
          .backgroundColor(Color.Pink)
        },
        normal: { //正常态
          .backgroundColor(Color.Gray)
        }
      })

以上的代码运行之后，可以发现效果和上边的onTouch是一模一样的。

什么是stateStyles？

stateStyles是多态样式，官方解读为可以依据组件的内部状态的不同，快速设置不同样式，比如组件的宽高，背景，边距等等，支持组件自身的所有的属性，目前支持的状态有五种，分别是：focused：获焦态、normal：正常态、pressed：按压态、disabled：不可用态、selected：选中态。

具体的使用场景，主要涉及多状态的切换场景，比如前边背景切换的案例，我们需要知道的是，它是支持组件自身的所有属性的，比如我们再增加一下其他的属性：

.stateStyles({
        pressed: { //按压
          .backgroundColor(Color.Pink)
          .width("100%")
        },
        normal: { //正常态
          .backgroundColor(Color.Gray)
          .width("80%")
        }
      })

我们看下效果：

如果修改的样式比较多，stateStyles可以结合@Styles装饰器一起来使用，比如上面的案例，我们修改一下：

  @Styles
  normalStyle() {
    .backgroundColor(Color.Gray)
    .width("80%")
  }

  @Styles
  pressedStyle() {
    .backgroundColor(Color.Pink)
    .width("100%")
  }

具体使用方式如下：

 .stateStyles({
        pressed: this.pressedStyle,
        normal: this.normalStyle
      })

disabled状态，只有设置了组件禁用参会进行展示，比如下面的案例，设置了组件禁用：

.enabled(false)
      .stateStyles({
        disabled: {
          .backgroundColor(Color.Blue)
        }
      })

运行之后，展示的背景颜色就是蓝色的。

除了以上的三种状态外，我们再介绍一个状态selected，它一般适用于可选择的组件，比如Checkbox，Radio等，目前支持的组件如下：

我们简单列举一个例子：

Radio({ value: 'radio', group: 'radioGroup' })
        .checked(this.isChecked)
        .height(50)
        .width(50)
        .borderWidth(0)
        .borderRadius(30)
        .onClick(() => {
          this.isChecked = !this.isChecked
        })
        .radioStyle({ checkedBackgroundColor: Color.Pink })
        .stateStyles({
          normal: {
            .backgroundColor(Color.Gray)
          },
          selected: {
            .backgroundColor(Color.Pink)
          }
        })

简单总结

在使用多态样式stateStyles的时候，需要注意一点，那就是当clicked和pressed同时在一个组件上使用时，只有后注册的状态才能生效。

文章标签：HarmonyOS语言，ArkUI