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

前言 本文基于Api12 一个组件,多种状态下,我们如何实现呢?举一个很简单的案例,一个按钮,默认状态下是黑色背景,点击后是红色,手指放开后还原黑色。 我们自然而然的就会想到利用手势的按下和抬起,改变其背景颜色即可,代码如下: 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) }, })

Mar 15, 2025 - 04:32
 0
鸿蒙开发:走进stateStyles多态样式

前言

本文基于Api12

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

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

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

Image description

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

Image description

除了多个属性之外,另外也可以直接传递样式:

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

Image description