1# stateStyles：多态样式
2
3
4\@Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。
5
6> **说明**：
7>
8> 多态样式仅支持通用属性
9
10## 概述
11
12stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：
13
14- focused：获焦态。
15
16- normal：正常态。
17
18- pressed：按压态。
19
20- disabled：不可用态。
21
22- selected<sup>10+</sup>：选中态。
23
24> **说明**：
25>
26> 获焦态目前仅支持通过外接键盘的tab键、方向键触发。不支持嵌套滚动组件场景按键走焦。
27
28
29## 使用场景
30
31
32### 基础场景
33
34下面的示例展示了stateStyles最基本的使用场景。Button1处于第一个组件，Button2处于第二个组件。按压时显示为pressed态指定的黑色。使用Tab键走焦，先是Button1获焦并显示为focus态指定的粉色。当Button2获焦的时候，Button2显示为focus态指定的粉色，Button1失焦显示normal态指定的蓝色。
35
36
37```ts
38@Entry
39@Component
40struct StateStylesSample {
41  build() {
42    Column() {
43      Button('Button1')
44        .stateStyles({
45          focused: {
46            .backgroundColor('#ffffeef0')
47          },
48          pressed: {
49            .backgroundColor('#ff707070')
50          },
51          normal: {
52            .backgroundColor('#ff2787d9')
53          }
54        })
55        .margin(20)
56      Button('Button2')
57        .stateStyles({
58          focused: {
59            .backgroundColor('#ffffeef0')
60          },
61          pressed: {
62            .backgroundColor('#ff707070')
63          },
64          normal: {
65            .backgroundColor('#ff2787d9')
66          }
67        })
68    }.margin('30%')
69  }
70}
71```
72
73
74  **图1** 获焦态和按压态  
75
76![Video_2023-03-17_120758](figures/Video_2023-03-17_120758.gif)
77
78
79### \@Styles和stateStyles联合使用
80
81以下示例通过\@Styles指定stateStyles的不同状态。
82
83
84
85```ts
86@Entry
87@Component
88struct MyComponent {
89  @Styles normalStyle() {
90    .backgroundColor(Color.Gray)
91  }
92
93  @Styles pressedStyle() {
94    .backgroundColor(Color.Red)
95  }
96
97  build() {
98    Column() {
99      Text('Text1')
100        .fontSize(50)
101        .fontColor(Color.White)
102        .stateStyles({
103          normal: this.normalStyle,
104          pressed: this.pressedStyle,
105        })
106    }
107  }
108}
109```
110
111  **图2** 正常态和按压态  
112
113![Video_2023-03-17_144824](figures/Video_2023-03-17_144824.gif)
114
115
116### 在stateStyles里使用常规变量和状态变量
117
118stateStyles可以通过this绑定组件内的常规变量和状态变量。
119
120
121```ts
122@Entry
123@Component
124struct CompWithInlineStateStyles {
125  @State focusedColor: Color = Color.Red;
126  normalColor: Color = Color.Green
127
128  build() {
129    Column() {
130      Button('clickMe').height(100).width(100)
131        .stateStyles({
132          normal: {
133            .backgroundColor(this.normalColor)
134          },
135          focused: {
136            .backgroundColor(this.focusedColor)
137          }
138        })
139        .onClick(() => {
140          this.focusedColor = Color.Pink
141        })
142        .margin('30%')
143    }
144  }
145}
146```
147
148Button默认normal态显示绿色，第一次按下Tab键让Button获焦显示为focus态的红色，点击事件触发后，再次按下Tab键让Button获焦，focus态变为粉色。
149
150  **图3** 点击改变获焦态样式  
151
152![Video_2023-03-17_144605](figures/Video_2023-03-17_144605.gif)
153