鸿蒙开发之组件不同状态样式设置stateStyles

开发中会有一种场景，组件（如：按钮）在不同状态下展示的样式不同。例如在normal状态和按下状态显示不同的样式，这个时候就可以通过stateStyles属性来设置组件。

@Entry
@Component
struct OfficialStateStylePage {
  @State message: string = 'Hello World'
    //设置第二个文本是否可用
  @State textEnable: boolean = true

    //无状态下样式
  @Styles normalStyle() {
    .backgroundColor(Color.Blue)
    .borderWidth(10)
    .borderColor(Color.Green)
    .borderRadius(10)
    .opacity(1)
  }

    //按下的样式
  @Styles pressedStyle() {
    .backgroundColor(Color.Green)
    .borderWidth(20)
    .borderColor(Color.Red)
    .borderRadius(50)
    .opacity(0.5)
  }

    //不可用时的样式
  @Styles unableStyle() {
    .backgroundColor(Color.Gray)
    .borderWidth(5)
    .borderColor(Color.Gray)
    .borderRadius(5)
    .opacity(0.2)
  }

  build() {
    Row() {
      Column({space:30}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            //单纯为了让第二个Text可以点击
            this.textEnable = true
          })
          .stateStyles({
            //注意⚠️这里不是this.normalStyle()，是this.normalStyle
            normal: this.normalStyle,
            pressed: this.pressedStyle
          })

        Text(this.textEnable ? '可以点击' : '不可以点击')
          .enabled(this.textEnable)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            //改变组件是否可用
            this.textEnable = !this.textEnable
          })
          .stateStyles({
            normal: this.normalStyle,
            pressed: this.pressedStyle,
            disabled: this.unableStyle
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

需要说明的是设置的属性都是通用属性。不能设置一些特有属性，例如我想不同状态改变字体大小fontSize，这个做不到。还得需要定义@state属性，通过改变定义的属性来改变。