1# 多态样式 2 3设置组件不同状态下的样式。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数类型 | 描述 | 13| ----------- | ----------- | ------------------------ | 14| stateStyles | StateStyles | 设置组件不同状态的样式。 | 15 16## StateStyles接口说明 17 18| 名称 | 类型 | 必填 | 描述 | 19| -------- | ---- | ---- | -------------------- | 20| normal | any | 否 | 组件无状态时的样式。 | 21| pressed | any | 否 | 组件按下状态的样式。 | 22| disabled | any | 否 | 组件禁用状态的样式。 | 23| focused | any | 否 | 组件获焦状态的样式。 | 24| clicked | any | 否 | 组件点击状态的样式。 | 25 26## 示例 27 28```ts 29// xxx.ets 30@Entry 31@Component 32struct StyleExample { 33 @State isEnable: boolean = true 34 35 @Styles pressedStyles() { 36 .backgroundColor("#ED6F21") 37 .borderRadius(10) 38 .borderStyle(BorderStyle.Dashed) 39 .borderWidth(2) 40 .borderColor("#33000000") 41 .width(120) 42 .height(30) 43 .opacity(1) 44 } 45 46 @Styles disabledStyles() { 47 .backgroundColor("#E5E5E5") 48 .borderRadius(10) 49 .borderStyle(BorderStyle.Solid) 50 .borderWidth(2) 51 .borderColor("#2a4c1919") 52 .width(90) 53 .height(25) 54 .opacity(1) 55 } 56 57 @Styles normalStyles() { 58 .backgroundColor("#0A59F7") 59 .borderRadius(10) 60 .borderStyle(BorderStyle.Solid) 61 .borderWidth(2) 62 .borderColor("#33000000") 63 .width(100) 64 .height(25) 65 .opacity(1) 66 } 67 68 build() { 69 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 70 Text("normal") 71 .fontSize(14) 72 .fontColor(Color.White) 73 .opacity(0.5) 74 .stateStyles({ 75 normal: this.normalStyles, 76 }) 77 .margin({ bottom: 20 }) 78 .textAlign(TextAlign.Center) 79 Text("pressed") 80 .backgroundColor("#0A59F7") 81 .borderRadius(20) 82 .borderStyle(BorderStyle.Dotted) 83 .borderWidth(2) 84 .borderColor(Color.Red) 85 .width(100) 86 .height(25) 87 .opacity(1) 88 .fontSize(14) 89 .fontColor(Color.White) 90 .stateStyles({ 91 pressed: this.pressedStyles, 92 }) 93 .margin({ bottom: 20 }) 94 .textAlign(TextAlign.Center) 95 Text(this.isEnable == true ? "effective" : "disabled") 96 .backgroundColor("#0A59F7") 97 .borderRadius(20) 98 .borderStyle(BorderStyle.Solid) 99 .borderWidth(2) 100 .borderColor(Color.Gray) 101 .width(100) 102 .height(25) 103 .opacity(1) 104 .fontSize(14) 105 .fontColor(Color.White) 106 .enabled(this.isEnable) 107 .stateStyles({ 108 disabled: this.disabledStyles, 109 }) 110 .textAlign(TextAlign.Center) 111 Text("control disabled") 112 .onClick(() => { 113 this.isEnable = !this.isEnable 114 console.log(`${this.isEnable}`) 115 }) 116 } 117 .width(350).height(300) 118 } 119} 120``` 121 122 123
