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