HarmonyOS 组件不同状态的样式代码如何优化？

Question

如题：HarmonyOS 组件不同状态的样式代码如何优化？

Answer 1

咨询描述

Text(item)
  .fontSize(12)
  .fontWeight(this.filter === item ? FontWeight.Bold : FontWeight.Normal)
  .fontColor(this.filter === item ? $r('app.color.main_color') : $r('app.color.text_color_medium'))
  .backgroundColor(this.filter === item ? $r('app.color.main_color') : $r('app.color.light_background_color'))
  .height(26)
  .borderRadius(8)
  .padding({ left: 12, right: 12 })
  .onClick(() => {
    this.roomFilter = item
  }) 

类似这种不同状态对应不同样式的代码，其中大量的三目运算符有什么优化的方案么？

可以使用多态样式，参考demo：

//xxx.ts
@Entry
@Component
struct StyleExample {
  @State isEnable: boolean = true;

  @Styles
  pressedStyles() {
    .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor('#33000000')
    .width(120)
    .height(30)
    .opacity(1)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text("pressed")
        .backgroundColor('#0A59F7')
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles
        })
        .margin({
          bottom: 20
        })
        .textAlign(TextAlign.Center)
    }
    .width(350)
    .height(300)
  }
}