ArkTS学习笔记_自定义组件的多态样式

#ArkTS学习笔记_自定义组件的多态样式

• 背景：
  我们在设计软件时，为了提高用户体验，经常在获焦时、按压时、不可用时等，设置一些样式，有点类似CSS中的伪类。
• 使用：
  自定义组件有一个属性stateStyles，可以设置在不同状态下有不同的样式。
  • focused：获焦态。
  • normal：正常态。
  • pressed：按压态。
  • disabled：不可用态。

一、stateStyles简单使用场景示例：

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Button1')
        .stateStyles({
          // 设置获焦状态下的样式   
          focused: {
            .backgroundColor(Color.Pink)
          },
          // 设置按压状态下的样式   
          pressed: {
            .backgroundColor(Color.Black)
          },
          // 设置正常状态下的样式  
          normal: {
            .backgroundColor(Color.Red)
          }
        })
        .margin(20)
    }.margin('30%')
  }
}

二、@Styles和stateStyles联合使用场景示例：

@Entry
@Component
struct MyComponent {
    
  // 封装一个正常状态下的样式  
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  // 封装一个按压状态下的样式
  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle, // 使用封装的样式，设置正常状态的样式
          pressed: this.pressedStyle,  // 使用封装的样式，设置按压状态的样式
        })
    }
  }
}