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