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 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct StyleExample { 69 @State isEnable: boolean = true 70 71 @Styles pressedStyles():void { 72 .backgroundColor("#ED6F21") 73 .borderRadius(10) 74 .borderStyle(BorderStyle.Dashed) 75 .borderWidth(2) 76 .borderColor("#33000000") 77 .width(120) 78 .height(30) 79 .opacity(1) 80 } 81 82 @Styles disabledStyles():void { 83 .backgroundColor("#E5E5E5") 84 .borderRadius(10) 85 .borderStyle(BorderStyle.Solid) 86 .borderWidth(2) 87 .borderColor("#2a4c1919") 88 .width(90) 89 .height(25) 90 .opacity(1) 91 } 92 93 @Styles normalStyles():void { 94 .backgroundColor("#0A59F7") 95 .borderRadius(10) 96 .borderStyle(BorderStyle.Solid) 97 .borderWidth(2) 98 .borderColor("#33000000") 99 .width(100) 100 .height(25) 101 .opacity(1) 102 } 103 104 build() { 105 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 106 Text("normal") 107 .fontSize(14) 108 .fontColor(Color.White) 109 .opacity(0.5) 110 .stateStyles({ 111 normal: this.normalStyles, 112 }) 113 .margin({ bottom: 20 }) 114 .textAlign(TextAlign.Center) 115 Text("pressed") 116 .backgroundColor("#0A59F7") 117 .borderRadius(20) 118 .borderStyle(BorderStyle.Dotted) 119 .borderWidth(2) 120 .borderColor(Color.Red) 121 .width(100) 122 .height(25) 123 .opacity(1) 124 .fontSize(14) 125 .fontColor(Color.White) 126 .stateStyles({ 127 pressed: this.pressedStyles, 128 }) 129 .margin({ bottom: 20 }) 130 .textAlign(TextAlign.Center) 131 Text(this.isEnable == true ? "effective" : "disabled") 132 .backgroundColor("#0A59F7") 133 .borderRadius(20) 134 .borderStyle(BorderStyle.Solid) 135 .borderWidth(2) 136 .borderColor(Color.Gray) 137 .width(100) 138 .height(25) 139 .opacity(1) 140 .fontSize(14) 141 .fontColor(Color.White) 142 .enabled(this.isEnable) 143 .stateStyles({ 144 disabled: this.disabledStyles, 145 }) 146 .textAlign(TextAlign.Center) 147 Text("control disabled") 148 .onClick(() => { 149 this.isEnable = !this.isEnable 150 console.log(`${this.isEnable}`) 151 }) 152 } 153 .width(350).height(300) 154 } 155} 156``` 157 158 159 160### 示例2 161 162```ts 163// xxx.ets 164@Entry 165@Component 166struct Index { 167 @State value: boolean = false 168 @State value2: boolean = false 169 170 @Styles 171 normalStyles(): void{ 172 .backgroundColor("#E5E5E1") 173 } 174 175 @Styles 176 selectStyles(): void{ 177 .backgroundColor("#ED6F21") 178 .borderWidth(2) 179 } 180 181 build() { 182 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 183 Column() { 184 Text('Radio1') 185 .fontSize(25) 186 Radio({ value: 'Radio1', group: 'radioGroup1' }) 187 .checked(this.value) 188 .height(50) 189 .width(50) 190 .borderWidth(0) 191 .borderRadius(30) 192 .onClick(() => { 193 this.value = !this.value 194 }) 195 .stateStyles({ 196 normal: this.normalStyles, 197 selected: this.selectStyles, 198 }) 199 } 200 .margin(30) 201 202 Column() { 203 Text('Radio2') 204 .fontSize(25) 205 Radio({ value: 'Radio2', group: 'radioGroup2' }) 206 .checked($$this.value2) 207 .height(50) 208 .width(50) 209 .borderWidth(0) 210 .borderRadius(30) 211 .stateStyles({ 212 normal: this.normalStyles, 213 selected: this.selectStyles, 214 }) 215 } 216 .margin(30) 217 }.padding({ top: 30 }) 218 } 219} 220``` 221 222
