#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles 原创 精华

北京大神
发布于 2025-5-19 17:29
浏览
0收藏

本文基于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
        }
      })


实际运行后效果:


#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles-鸿蒙开发者社区


哎,还别说,还真实现了这个效果,如果不仅仅是背景颜色呢,也许在实际的开发中会有很多个属性的改变,比如宽高,边距等等,那么我们就需要很多个属性进行赋值,此种写法上,除了实现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:选中态。


#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles-鸿蒙开发者社区


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


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


我们看下效果:


#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles-鸿蒙开发者社区


如果修改的样式比较多,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等,目前支持的组件如下:


#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles-鸿蒙开发者社区


我们简单列举一个例子:


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


#我的鸿蒙开发手记# HarmonyOS开发之了解多态样式stateStyles-鸿蒙开发者社区


简单总结


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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2025-5-20 14:44:47修改
收藏
回复
举报
回复
    相关推荐