不同状态下的样式

2024-01-22 16:24 更新

多态样式

说明

从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

描述

stateStyles

StateStyles

设置组件不同状态的样式。

从API version 9开始,该接口支持在ArkTS卡片中使用。

StateStyles接口说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

类型

必填

描述

normal

()=>void

组件无状态时的样式。

pressed

()=>void

组件按下状态的样式。

disabled

()=>void

组件禁用状态的样式。

focused

()=>void

组件获焦状态的样式。

clicked

()=>void

组件点击状态的样式。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct StyleExample {
  5. @State isEnable: boolean = true
  6. @Styles pressedStyles() {
  7. .backgroundColor("#ED6F21")
  8. .borderRadius(10)
  9. .borderStyle(BorderStyle.Dashed)
  10. .borderWidth(2)
  11. .borderColor("#33000000")
  12. .width(120)
  13. .height(30)
  14. .opacity(1)
  15. }
  16. @Styles disabledStyles() {
  17. .backgroundColor("#E5E5E5")
  18. .borderRadius(10)
  19. .borderStyle(BorderStyle.Solid)
  20. .borderWidth(2)
  21. .borderColor("#2a4c1919")
  22. .width(90)
  23. .height(25)
  24. .opacity(1)
  25. }
  26. @Styles normalStyles() {
  27. .backgroundColor("#0A59F7")
  28. .borderRadius(10)
  29. .borderStyle(BorderStyle.Solid)
  30. .borderWidth(2)
  31. .borderColor("#33000000")
  32. .width(100)
  33. .height(25)
  34. .opacity(1)
  35. }
  36. build() {
  37. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  38. Text("normal")
  39. .fontSize(14)
  40. .fontColor(Color.White)
  41. .opacity(0.5)
  42. .stateStyles({
  43. normal: this.normalStyles,
  44. })
  45. .margin({ bottom: 20 })
  46. .textAlign(TextAlign.Center)
  47. Text("pressed")
  48. .backgroundColor("#0A59F7")
  49. .borderRadius(20)
  50. .borderStyle(BorderStyle.Dotted)
  51. .borderWidth(2)
  52. .borderColor(Color.Red)
  53. .width(100)
  54. .height(25)
  55. .opacity(1)
  56. .fontSize(14)
  57. .fontColor(Color.White)
  58. .stateStyles({
  59. pressed: this.pressedStyles,
  60. })
  61. .margin({ bottom: 20 })
  62. .textAlign(TextAlign.Center)
  63. Text(this.isEnable == true ? "effective" : "disabled")
  64. .backgroundColor("#0A59F7")
  65. .borderRadius(20)
  66. .borderStyle(BorderStyle.Solid)
  67. .borderWidth(2)
  68. .borderColor(Color.Gray)
  69. .width(100)
  70. .height(25)
  71. .opacity(1)
  72. .fontSize(14)
  73. .fontColor(Color.White)
  74. .enabled(this.isEnable)
  75. .stateStyles({
  76. disabled: this.disabledStyles,
  77. })
  78. .textAlign(TextAlign.Center)
  79. Text("control disabled")
  80. .onClick(() => {
  81. this.isEnable = !this.isEnable
  82. console.log(`${this.isEnable}`)
  83. })
  84. .fontSize(10)
  85. }
  86. .width(350).height(300).margin(10)
  87. }
  88. }


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号