CarCheckTerminal/entry/src/main/ets/pages/components/button/Index.ets

interface ButtonStyle {
  width: string | number
  height: string | number
}

class CusButtonModifier implements AttributeModifier<RowAttribute> {
  public normalImage?: Resource
  public activeImage?: Resource

  applyNormalAttribute(instance: RowAttribute): void {
    if (this.normalImage) {
      instance.backgroundImage(this.normalImage).backgroundImageSize({ width: "100%", height: "100%" })
    }
  }

  applyPressedAttribute(instance: RowAttribute): void {
    if (this.activeImage) {
      instance.backgroundImage(this.activeImage).backgroundImageSize({ width: "100%", height: "100%" })
    }
  }
}

@Component
export struct CusButton {
  public text?: string
  public normalImage?: Resource
  public activeImage?: Resource
  public style?: SizeOptions
  private modifier: CusButtonModifier = new CusButtonModifier()

  aboutToAppear(): void {
    this.setAttr()
  }

  setAttr() {
    this.modifier.normalImage = this.normalImage
    this.modifier.activeImage = this.activeImage
  }

  build() {
    Row() {
      if (this.text) {
        Text(this.text).fontFamily("Alimama").fontSize(24)
      }
    }
    .width(this.style?.width || "100%")
    .height(this.style?.height)
    .justifyContent(FlexAlign.Center)
    .attributeModifier(this.modifier)
  }
}