• 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
28
29## 示例
30
31```ts
32// xxx.ets
33@Entry
34@Component
35struct StyleExample {
36  @State isEnable: boolean = true
37
38  @Styles pressedStyles() {
39        .backgroundColor("#ED6F21")
40        .borderRadius(10)
41        .borderStyle(BorderStyle.Dashed)
42        .borderWidth(2)
43        .borderColor("#33000000")
44        .width(120)
45        .height(30)
46        .opacity(1)
47  }
48
49  @Styles disabledStyles() {
50        .backgroundColor("#E5E5E5")
51        .borderRadius(10)
52        .borderStyle(BorderStyle.Solid)
53        .borderWidth(2)
54        .borderColor("#2a4c1919")
55        .width(90)
56        .height(25)
57        .opacity(1)
58  }
59
60  @Styles normalStyles() {
61        .backgroundColor("#0A59F7")
62        .borderRadius(10)
63        .borderStyle(BorderStyle.Solid)
64        .borderWidth(2)
65        .borderColor("#33000000")
66        .width(100)
67        .height(25)
68        .opacity(1)
69  }
70
71  build() {
72    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
73      Text("normal")
74        .fontSize(14)
75        .fontColor(Color.White)
76        .opacity(0.5)
77        .stateStyles({
78          normal: this.normalStyles,
79        })
80        .margin({ bottom: 20 })
81        .textAlign(TextAlign.Center)
82      Text("pressed")
83        .backgroundColor("#0A59F7")
84        .borderRadius(20)
85        .borderStyle(BorderStyle.Dotted)
86        .borderWidth(2)
87        .borderColor(Color.Red)
88        .width(100)
89        .height(25)
90        .opacity(1)
91        .fontSize(14)
92        .fontColor(Color.White)
93        .stateStyles({
94          pressed: this.pressedStyles,
95        })
96        .margin({ bottom: 20 })
97        .textAlign(TextAlign.Center)
98      Text(this.isEnable == true ? "effective" : "disabled")
99        .backgroundColor("#0A59F7")
100        .borderRadius(20)
101        .borderStyle(BorderStyle.Solid)
102        .borderWidth(2)
103        .borderColor(Color.Gray)
104        .width(100)
105        .height(25)
106        .opacity(1)
107        .fontSize(14)
108        .fontColor(Color.White)
109        .enabled(this.isEnable)
110        .stateStyles({
111          disabled: this.disabledStyles,
112        })
113        .textAlign(TextAlign.Center)
114      Text("control disabled")
115        .onClick(() => {
116          this.isEnable = !this.isEnable
117          console.log(`${this.isEnable}`)
118        })
119    }
120    .width(350).height(300)
121  }
122}
123```
124
125![zh-cn_image_0000001188742468](figures/zh-cn_image_0000001188742468.gif)
126