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