HarmonyOS 组件设置onClick事件，如何实现点击组件过程中，组件背景的变化效果？

Question

组件设置onClick事件，如何实现点击组件过程中，组件背景的变化效果

Answer 1

通过设置组件的StateStyle来改变组件的背景，参考代码如下；

@Entry
@Component
struct Index {
  @State isEnable: boolean = true
  @Styles pressedStyles() {
    .backgroundColor(Color.Red)
    .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).margin(10)
  }
}