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