1# 多态样式 2 3设置组件不同状态下的样式。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 从API Version 11开始支持另一种写法[attributeModifier](./ts-universal-attributes-attribute-modifier.md)，可根据开发者需要动态设置属性。 10 11## stateStyles 12 13stateStyles(value: StateStyles) 14 15设置组件不同状态的样式。 16 17**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------ | ----------------------------------- | ---- | ------------------------ | 25| value | [StateStyles](#statestyles接口说明) | 是 | 设置组件不同状态的样式。 | 26 27## StateStyles接口说明 28 29从API version 9开始，该接口支持在ArkTS卡片中使用。只支持[通用属性](ts-universal-attributes-size.md)。 30 31| 状态名称 | 类型 | 必填 | 描述 | 32| -------- | -------- | -------- | -------- | 33| normal | ()=>void | 否 | 组件无状态时的样式。 | 34| pressed | ()=>void | 否 | 组件按下状态的样式。 | 35| disabled | ()=>void | 否 | 组件禁用状态的样式。 | 36| focused | ()=>void | 否 | 组件获焦状态的样式。 | 37| clicked | ()=>void | 否 | 组件点击状态的样式。 | 38| selected<sup>10+</sup> | ()=>void | 否 | 组件选中状态的样式。<br/> | 39 40**selected选中状态说明** 41 42- 当前多态样式的选中状态样式依赖组件选中属性值，可以使用[onClick](ts-universal-events-click.md)修改属性值，或使用属性自带[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定功能。 43 44- 当前支持selected的组件及其参数/属性值： 45 46 | 组件 | 支持的参数/属性 | 起始API版本 | 47 | ------------------------------------------------------------ | --------------- | ----------- | 48 | [Checkbox](ts-basic-components-checkbox.md) | select | 10 | 49 | [CheckboxGroup](ts-basic-components-checkboxgroup.md) | selectAll | 10 | 50 | [Radio](ts-basic-components-radio.md) | checked | 10 | 51 | [Toggle](ts-basic-components-toggle.md) | isOn | 10 | 52 | [ListItem](ts-container-listitem.md) | selected | 10 | 53 | [GridItem](ts-container-griditem.md) | selected | 10 | 54 | [MenuItem](ts-basic-components-menuitem.md) | selected | 10 | 55 56## 示例 57 58### 示例1 59 60```ts 61// xxx.ets 62@Entry 63@Component 64struct StyleExample { 65 @State isEnable: boolean = true 66 67 @Styles pressedStyles():void { 68 .backgroundColor("#ED6F21") 69 .borderRadius(10) 70 .borderStyle(BorderStyle.Dashed) 71 .borderWidth(2) 72 .borderColor("#33000000") 73 .width(120) 74 .height(30) 75 .opacity(1) 76 } 77 78 @Styles disabledStyles():void { 79 .backgroundColor("#E5E5E5") 80 .borderRadius(10) 81 .borderStyle(BorderStyle.Solid) 82 .borderWidth(2) 83 .borderColor("#2a4c1919") 84 .width(90) 85 .height(25) 86 .opacity(1) 87 } 88 89 @Styles normalStyles():void { 90 .backgroundColor("#0A59F7") 91 .borderRadius(10) 92 .borderStyle(BorderStyle.Solid) 93 .borderWidth(2) 94 .borderColor("#33000000") 95 .width(100) 96 .height(25) 97 .opacity(1) 98 } 99 100 build() { 101 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 102 Text("normal") 103 .fontSize(14) 104 .fontColor(Color.White) 105 .opacity(0.5) 106 .stateStyles({ 107 normal: this.normalStyles, 108 }) 109 .margin({ bottom: 20 }) 110 .textAlign(TextAlign.Center) 111 Text("pressed") 112 .backgroundColor("#0A59F7") 113 .borderRadius(20) 114 .borderStyle(BorderStyle.Dotted) 115 .borderWidth(2) 116 .borderColor(Color.Red) 117 .width(100) 118 .height(25) 119 .opacity(1) 120 .fontSize(14) 121 .fontColor(Color.White) 122 .stateStyles({ 123 pressed: this.pressedStyles, 124 }) 125 .margin({ bottom: 20 }) 126 .textAlign(TextAlign.Center) 127 Text(this.isEnable == true ? "effective" : "disabled") 128 .backgroundColor("#0A59F7") 129 .borderRadius(20) 130 .borderStyle(BorderStyle.Solid) 131 .borderWidth(2) 132 .borderColor(Color.Gray) 133 .width(100) 134 .height(25) 135 .opacity(1) 136 .fontSize(14) 137 .fontColor(Color.White) 138 .enabled(this.isEnable) 139 .stateStyles({ 140 disabled: this.disabledStyles, 141 }) 142 .textAlign(TextAlign.Center) 143 Text("control disabled") 144 .onClick(() => { 145 this.isEnable = !this.isEnable 146 console.log(`${this.isEnable}`) 147 }) 148 } 149 .width(350).height(300) 150 } 151} 152``` 153 154 155 156### 示例2 157 158```ts 159// xxx.ets 160@Entry 161@Component 162struct Index { 163 @State value: boolean = false 164 @State value2: boolean = false 165 166 @Styles 167 normalStyles(): void{ 168 .backgroundColor("#E5E5E1") 169 } 170 171 @Styles 172 selectStyles(): void{ 173 .backgroundColor("#ED6F21") 174 .borderWidth(2) 175 } 176 177 build() { 178 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 179 Column() { 180 Text('Radio1') 181 .fontSize(25) 182 Radio({ value: 'Radio1', group: 'radioGroup1' }) 183 .checked(this.value) 184 .height(50) 185 .width(50) 186 .borderWidth(0) 187 .borderRadius(30) 188 .onClick(() => { 189 this.value = !this.value 190 }) 191 .stateStyles({ 192 normal: this.normalStyles, 193 selected: this.selectStyles, 194 }) 195 } 196 .margin(30) 197 198 Column() { 199 Text('Radio2') 200 .fontSize(25) 201 Radio({ value: 'Radio2', group: 'radioGroup2' }) 202 .checked($$this.value2) 203 .height(50) 204 .width(50) 205 .borderWidth(0) 206 .borderRadius(30) 207 .stateStyles({ 208 normal: this.normalStyles, 209 selected: this.selectStyles, 210 }) 211 } 212 .margin(30) 213 }.padding({ top: 30 }) 214 } 215} 216``` 217 218
