Handle the number logic of the Badge component in the onComplete callback event, which is triggered both when the image data is loaded successfully and when it is decoded. The sample code snippet is as follows:
@Entry
@Component
struct BadgeDemo {
@State message: string = 'Hello World';
@State sizes: string = '0';
@State showCountBadge: boolean = false;
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.showCountBadge = !this.showCountBadge; // change show status
})
Stack() {
Badge({
value: '',
position: {
x: 40,
y: 0
},
style: {
badgeSize: 15,
badgeColor: Color.Red
}
}) {
Image($r('app.media.startIcon'))
.width(50)
.height(50)
}
.visibility(this.showCountBadge ? Visibility.Visible : Visibility.None)
Badge({
count: 98,
maxCount: 99,
position: { x: 30, y: 0 },
style: {
fontSize: 15,
badgeSize: 15,
badgeColor: Color.Red
}
}) {
Image($r('app.media.startIcon'))
.width(50)
.height(50)
}
.visibility(this.showCountBadge ? Visibility.None : Visibility.Visible)
}
}
.height('100%')
}
}