在日常的 ArkTS 应用开发工作中，我常常面临着为组件设置不同状态样式的需求。用户与界面进行交互时，如点击、按下、选中、禁用等操作，都希望组件能呈现出相应的视觉反馈，以提升用户体验。然而，传统的样式设置方式在处理这些动态变化时显得力不从心，代码变得冗长且难以维护。直到我接触到了 ArkTS 的多态样式，它为我提供了一种简洁而强大的解决方案，让我能够轻松地为组件设置不同状态下的样式。为了帮助更多开发者掌握这一实用的功能，我决定撰写这篇自学指南。
一、多态样式概述
多态样式允许开发者为组件设置不同状态下的样式，从 API Version 8 开始支持。从 API Version 11 开始，还支持另一种写法 attributeModifier，可根据开发者的需求动态设置属性。多态样式主要通过 stateStyles 接口来实现，该接口从 API version 9 开始支持在 ArkTS 卡片中使用，从 API version 11 开始支持在元服务中使用，其系统能力依赖于 SystemCapability.ArkUI.ArkUI.Full。
1. stateStyles 接口
stateStyles 接口用于设置组件不同状态的样式，其参数 value 类型为 StateStyles，是必填项。
StateStyles 接口说明
StateStyles 接口支持多种状态，从 API version 9 开始支持在 ArkTS 卡片中使用，且只支持通用属性。从 API version 11 开始支持在元服务中使用。以下是各种状态的说明：
normal：组件无状态时的样式，类型为() => void，可选参数。pressed：组件按下状态的样式，类型为() => void，可选参数。disabled：组件禁用状态的样式，类型为() => void，可选参数。focused：组件获焦状态的样式，类型为() => void，可选参数。clicked：组件点击状态的样式，类型为() => void，可选参数。selected（从 API 10 开始） ：组件选中状态的样式，类型为() => void，可选参数。
selected 选中状态说明
当前多态样式的选中状态样式依赖组件选中属性值，可以使用 onClick 修改属性值，或使用属性自带的 $$ 双向绑定功能。目前支持 selected 的组件及其参数 / 属性值如下：
| 组件 | 支持的参数 / 属性 | 起始 API 版本 |
|---|---|---|
| Checkbox | select | 10 |
| CheckboxGroup | selectAll | 10 |
| Radio | checked | 10 |
| Toggle | isOn | 10 |
| ListItem | selected | 10 |
| GridItem | selected | 10 |
| MenuItem | selected | 10 |
二、示例代码分析与拓展
示例 1：设置 Text 多态样式
以下是设置 Text 组件在 pressed 和 disabled 状态下样式变化的示例代码：
scss
// xxx.ets
@Entry
@Component
struct StyleExample {
@State isEnable: boolean = true
@Styles pressedStyles(): void {
.backgroundColor("#FF8C00") // 修改背景颜色为橙色
.borderRadius(15) // 增大圆角半径
.borderStyle(BorderStyle.Dotted) // 改变边框样式为点状
.borderWidth(3) // 增加边框宽度
.borderColor("#66000000") // 修改边框颜色
.width(130) // 增加宽度
.height(35) // 增加高度
.opacity(0.9) // 调整透明度
}
@Styles disabledStyles(): void {
.backgroundColor("#D3D3D3") // 修改背景颜色为浅灰色
.borderRadius(12) // 调整圆角半径
.borderStyle(BorderStyle.Dashed) // 改变边框样式为虚线
.borderWidth(2) // 边框宽度
.borderColor("#4a6c3919") // 修改边框颜色
.width(100) // 调整宽度
.height(30) // 调整高度
.opacity(0.8) // 调整透明度
}
@Styles normalStyles(): void {
.backgroundColor("#00BFFF") // 修改背景颜色为深天蓝色
.borderRadius(12) // 圆角半径
.borderStyle(BorderStyle.Solid) // 边框样式为实线
.borderWidth(2) // 边框宽度
.borderColor("#33000000") // 边框颜色
.width(110) // 宽度
.height(30) // 高度
.opacity(0.9) // 透明度
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Text("normal")
.fontSize(16) // 增大字体大小
.fontColor(Color.White)
.opacity(0.6) // 调整透明度
.stateStyles({
normal: this.normalStyles,
})
.margin({ bottom: 25 }) // 增加底部边距
.textAlign(TextAlign.Center)
Text("pressed")
.backgroundColor("#00BFFF")
.borderRadius(25) // 增大圆角半径
.borderStyle(BorderStyle.Dotted) // 改变边框样式为双实线
.borderWidth(3) // 增加边框宽度
.borderColor(Color.Orange) // 修改边框颜色为橙色
.width(110) // 宽度
.height(30) // 高度
.opacity(0.9) // 透明度
.fontSize(16) // 增大字体大小
.fontColor(Color.White)
.stateStyles({
pressed: this.pressedStyles,
})
.margin({ bottom: 25 }) // 增加底部边距
.textAlign(TextAlign.Center)
Text(this.isEnable == true ? "effective" : "disabled")
.backgroundColor("#00BFFF")
.borderRadius(25) // 增大圆角半径
.borderStyle(BorderStyle.Solid) // 边框样式为实线
.borderWidth(3) // 增加边框宽度
.borderColor(Color.Gray)
.width(110) // 宽度
.height(30) // 高度
.opacity(0.9) // 透明度
.fontSize(16) // 增大字体大小
.fontColor(Color.White)
.enabled(this.isEnable)
.stateStyles({
disabled: this.disabledStyles,
})
.textAlign(TextAlign.Center)
Text("control disabled")
.onClick(() => {
this.isEnable = !this.isEnable
console.log(`${this.isEnable}`)
})
}
.width(400).height(350) // 调整容器大小
}
}代码分析
- 状态样式定义 ：通过
@Styles装饰器定义了pressedStyles、disabledStyles和normalStyles三种状态的样式。在每个样式函数中，设置了组件在不同状态下的背景颜色、边框样式、宽度、高度等属性。 - 组件状态设置 ：在
Text组件中，使用stateStyles接口为不同状态的Text组件设置相应的样式。例如，对于pressed状态的Text组件，当用户按下时，会应用pressedStyles中定义的样式。 - 状态控制 ：通过
@State装饰器定义了isEnable状态变量，用于控制Text组件的启用和禁用状态。点击control disabled文本时，会切换isEnable的值，从而改变Text组件的状态。
示例 2：设置 Radio 多态样式
以下是设置 Radio 组件在 selected 状态下样式变化的示例代码：
less
// xxx.ets
@Entry
@Component
struct Index {
@State value: boolean = false
@State value2: boolean = false
@Styles
normalStyles(): void {
.backgroundColor("#F5F5F5") // 修改背景颜色为淡灰色
}
@Styles
selectStyles(): void {
.backgroundColor("#FF6347") // 修改背景颜色为番茄红色
.borderWidth(3) // 增加边框宽度
.borderColor("#8B0000") // 修改边框颜色为深红色
}
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Column() {
Text('Radio1')
.fontSize(28) // 增大字体大小
Radio({ value: 'Radio1', group: 'radioGroup1' })
.checked(this.value)
.height(55) // 增加高度
.width(55) // 增加宽度
.borderWidth(1) // 调整边框宽度
.borderRadius(35) // 增大圆角半径
.onClick(() => {
this.value = !this.value
})
.stateStyles({
normal: this.normalStyles,
selected: this.selectStyles,
})
}
.margin(35) // 增加外边距
Column() {
Text('Radio2')
.fontSize(28) // 增大字体大小
Radio({ value: 'Radio2', group: 'radioGroup2' })
.checked($$this.value2)
.height(55) // 增加高度
.width(55) // 增加宽度
.borderWidth(1) // 调整边框宽度
.borderRadius(35) // 增大圆角半径
.stateStyles({
normal: this.normalStyles,
selected: this.selectStyles,
})
}
.margin(35) // 增加外边距
}.padding({ top: 35 }) // 增加顶部内边距
}
}代码分析
- 状态样式定义 ：同样使用
@Styles装饰器定义了normalStyles和selectStyles两种状态的样式。normalStyles定义了Radio组件在正常状态下的背景颜色，selectStyles定义了Radio组件在选中状态下的背景颜色和边框样式。 - 组件状态设置 ：在
Radio组件中，使用stateStyles接口为Radio组件设置正常状态和选中状态的样式。当用户选中某个Radio组件时，会应用selectStyles中定义的样式。 - 状态控制 ：通过
@State装饰器定义了value和value2两个状态变量，分别用于控制两个Radio组件的选中状态。点击Radio组件时，会切换相应的状态变量的值。
三、总结
ArkTS 的多态样式为开发者提供了一种强大而灵活的方式来设置组件在不同状态下的样式。通过合理运用 stateStyles 接口和 StateStyles 接口，可以轻松地为组件添加动态的视觉反馈，提升用户体验。在实际开发中，建议根据具体需求为不同的组件设置合适的状态样式，并注意处理好状态之间的切换逻辑。
最后如果这篇文章对你有帮助，希望您能关注，点赞，加收藏哦～～～～