写点什么

HarmonyOS:ArkTS 多态样式自学指南

作者:李游Leo
HarmonyOS:ArkTS 多态样式自学指南

在日常的 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​​ 的组件及其参数 / 属性值如下:


二、示例代码分析与拓展

示例 1:设置 ​​Text​​ 多态样式

以下是设置 ​​Text​​​ 组件在 ​​pressed​​​ 和 ​​disabled​​ 状态下样式变化的示例代码:


// xxx.ets@Entry@Componentstruct 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​​ 状态下样式变化的示例代码:


// xxx.ets@Entry@Componentstruct 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​​ 接口,可以轻松地为组件添加动态的视觉反馈,提升用户体验。在实际开发中,建议根据具体需求为不同的组件设置合适的状态样式,并注意处理好状态之间的切换逻辑。


最后如果这篇文章对你有帮助,希望您能关注,点赞,加收藏哦~~~~

发布于: 刚刚阅读数: 7
用户头像

李游Leo

关注

全栈开发工程师、全栈讲师、华为HDE 2022-07-14 加入

原百度、时趣互动、乐视高级前端(软件)开发工程师。后在北京一所当地大学任教,主要职务是教学主任,也为网易云课堂微专业的前端课程负责人。

评论

发布
暂无评论
HarmonyOS:ArkTS 多态样式自学指南_ArkTS_李游Leo_InfoQ写作社区