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