鸿蒙next开发学习指南：多态样式-@stateStyles状态变量

最新推荐文章于 2025-08-26 20:36:15 发布

原创

最新推荐文章于 2025-08-26 20:36:15 发布 · 1k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #鸿蒙 #开发语言 #鸿蒙系统 #android

@Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我要介绍的内容stateStyles（又称为：多态样式）。

多态样式仅支持通用属性

概述

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：

focused：获焦态。
normal：正常态。
pressed：按压态。
disabled：不可用态。
selected10+：选中态。

使用场景

基础场景

下面的示例展示了stateStyles最基本的使用场景。Button1处于第一个组件，Button2处于第二个组件。按压时显示为pressed态指定的黑色。使用Tab键走焦，先是Button1获焦并显示为focus态指定的粉色。当Button2获焦的时候，Button2显示为focus态指定的粉色，Button1失焦显示normal态指定的蓝色。

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Button1')
        .stateStyles({
          focused: {
            .backgroundColor('#ffffeef0')
          },
          pressed: {
            .backgroundColor('ff707070')
          },
          normal: {
            .backgroundColor('ff2787d9')
          }
        })
        .margin(20)
      Button('Button2')
        .stateStyles({
          focused: {
            .backgroundColor('#ffffeef0')
          },
          pressed: {
            .backgroundColor('ff707070')
          },
          normal: {
            .backgroundColor('ff2787d9')
          }
        })
    }.margin('30%')
  }
}

图1 获焦态和按压态