stateStyles：多态样式
================

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/mnPQdmvySXy9jBg2usXgPg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132248Z&HW-CC-Expire=86400&HW-CC-Sign=E681D179566D689F9EAE23EC617D84C5E11912D873E3481D9A041F59CBF0A406)

多态样式仅支持通用属性。如果多态样式不生效，则该属性可能为组件的私有属性，例如：[fontColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button#fontcolor)、[TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)组件的[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)等。此时，可以通过[attributeModifier](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#attributemodifier)动态设置组件属性来解决此问题。

#### 概述

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8d/v3/vwL6rc2tQK6MZ7B_z_kIFg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132248Z&HW-CC-Expire=86400&HW-CC-Sign=B1A570B7BECC4CCF336A31FDDC8DCE16F4006AB93EC6FD39AFC8A4A318FB03AE)

获焦态目前仅支持通过外接键盘的Tab键或方向键触发，不支持在嵌套滚动组件场景下通过按键触发。

#### 使用场景

#### \[h2\]基础场景

下面的示例展示了stateStyles最基本的使用场景。Button1处于第一个组件，Button2处于第二个组件。按压时显示为pressed态指定的黑色。使用Tab键走焦，Button1获焦并显示为focused态指定的粉色。当Button2获焦的时候，Button2显示为focused态指定的粉色，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** 获焦态和按压态

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0/v3/1wb0TZ08T3iWuLITC-KpQQ/zh-cn_image_0000002634008136.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132248Z&HW-CC-Expire=86400&HW-CC-Sign=60FB7537CBF4184ED97E285D7513ADAB5ED38EEE782256966AC40DC2EBA7A234)

#### \[h2\]@Styles和stateStyles联合使用

以下示例通过@Styles指定stateStyles的不同状态。

@Entry
@Component
struct MyComponent {
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }
  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
}

**图2** 正常态和按压态

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/36/v3/22AsfuHzTPu0FxngnCijLw/zh-cn_image_0000002664207281.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132248Z&HW-CC-Expire=86400&HW-CC-Sign=57AFDFD4E4BA6E02589F5C510AA26E2EC1EE954D0D7B491B476FF4A17CE57CBD)

#### \[h2\]在stateStyles里使用常规变量和状态变量

stateStyles可以通过this绑定组件内的常规变量和状态变量。

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = 0xD5D5D5;
  normalColor: Color = 0x004AAF;

  build() {
    Column() {
      Button('clickMe')
        .height(100)
        .width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = 0x707070;
        })
        .margin('30%')
    }
  }
}

Button默认normal态显示蓝色，第一次按下Tab键让Button获焦显示为focus态的浅灰色，点击事件触发后，再次按下Tab键让Button获焦，focus态变为深灰色。

**图3** 点击改变获焦态样式

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/wK3lVoAqRr-0IA5bTKNL5g/zh-cn_image_0000002664327343.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132248Z&HW-CC-Expire=86400&HW-CC-Sign=D57EFD08B89E2757021E87260FDE9F8686A5EC71D46EF5B0DF939C8C32D4F99A)