Button等控件设置点击效果？

Question

如题：Button等控件设置点击效果？

Answer 1

@Styles自定义组件样式目前只支持CommonAttribute下的通用属性（ declare class CommonAttribute extends CommonMethod<CommonAttribute\> ），Button下的fontColor属性属于ButtonAttribute下的属性（declare class ButtonAttribute extends CommonMethod<ButtonAttribute\> ），所以在@Styles中自定义样式中使用fontColor时IDE会报错“Property ‘fontColor’ does not exist on type ‘CommonAttribute’. <ArkTSCheck\>”，可通过状态变量来实现Button不同状态下的ButtonAttribute属性修改。

示例代码

@Entry
@Component
struct TextExample6 {
  // 通过状态变量来触发Button非通用属性刷新
  @State bFontColor: string = '#000000' // Button字体颜色状态变量
  @State bFontSize: string = '15' // Button字体大小状态变量

  build() {
    Button('我的按钮')
      .fontColor(this.bFontColor)
      .fontSize(this.bFontSize)
      .stateStyles({
        normal: this.normalStyles,
        pressed: this.pressedStyles,
        disabled: this.disabledStyles,
      })
      .onTouch((event?: TouchEvent) => {
        // 触摸逻辑,通过判touchEvent的type修改状态变量触发Button刷新样式
        if (event.type == TouchType.Up) {
          // 按下
          this.bFontColor = '#000000'
          this.bFontSize = '15'
        } else if (event.type == TouchType.Move) {
          // 移动
          this.bFontColor = '#FFFF00'
          this.bFontSize = '40'
        }
        else {
          // 松开/取消
          this.bFontColor = '#00FFFF'
          this.bFontSize = '20'
        }
      })
  }
}