1# stateStyles：多态样式 2 3 4\@Styles和\@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。 5 6 7## 概述 8 9stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态： 10 11- focused：获焦态。 12 13- normal：正常态。 14 15- pressed：按压态。 16 17- disabled：不可用态。 18 19 20## 使用场景 21 22 23### 基础场景 24 25下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件，默认获焦，生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件，使其不处于获焦态，就会生效normal态的黄色。 26 27 28```ts 29@Entry 30@Component 31struct StateStylesSample { 32 build() { 33 Column() { 34 Button('Click me') 35 .stateStyles({ 36 focused: { 37 .backgroundColor(Color.Pink) 38 }, 39 pressed: { 40 .backgroundColor(Color.Black) 41 }, 42 normal: { 43 .backgroundColor(Color.Yellow) 44 } 45 }) 46 }.margin('30%') 47 } 48} 49``` 50 51 52 **图1** 获焦态和按压态 53 54 55 56 57### \@Styles和stateStyles联合使用 58 59以下示例通过\@Styles指定stateStyles的不同状态。 60 61 62 63```ts 64@Entry 65@Component 66struct MyComponent { 67 @Styles normalStyle() { 68 .backgroundColor(Color.Gray) 69 } 70 71 @Styles pressedStyle() { 72 .backgroundColor(Color.Red) 73 } 74 75 build() { 76 Column() { 77 Text('Text1') 78 .fontSize(50) 79 .fontColor(Color.White) 80 .stateStyles({ 81 normal: this.normalStyle, 82 pressed: this.pressedStyle, 83 }) 84 } 85 } 86} 87``` 88 89 **图2** 正常态和按压态 90 91 92 93 94### 在stateStyles里使用常规变量和状态变量 95 96stateStyles可以通过this绑定组件内的常规变量和状态变量。 97 98 99```ts 100@Entry 101@Component 102struct CompWithInlineStateStyles { 103 @State focusedColor: Color = Color.Red; 104 normalColor: Color = Color.Green 105 106 build() { 107 Button('clickMe').height(100).width(100) 108 .stateStyles({ 109 normal: { 110 .backgroundColor(this.normalColor) 111 }, 112 focused: { 113 .backgroundColor(this.focusedColor) 114 } 115 }) 116 .onClick(() => { 117 this.focusedColor = Color.Pink 118 }) 119 .margin('30%') 120 } 121} 122``` 123 124Button默认获焦显示红色，点击事件触发后，获焦态变为粉色。 125 126 **图3** 点击改变获焦态样式 127 128 129
