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

interface ButtonStyle extends SizeOptions {
  fontColor?: ResourceColor
  fontSize?: 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 {
  @Prop text: string = ""
  @Prop style: ButtonStyle
  public normalImage?: Resource
  public activeImage?: Resource
  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(this.style?.fontSize || 18)
          .fontColor(this.style?.fontColor || 0xffffff)
      }
    }
    .width(this.style?.width || "100%")
    .height(this.style?.height)
    .justifyContent(FlexAlign.Center)
    .attributeModifier(this.modifier)
  }
}