鸿蒙NEXT版实战开发：Badge有数量与无数量切换时Image会发生闪动，怎么让它不闪动？

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

Badge有数量与无数量切换时Image会发生闪动，怎么让它不闪动

可以在onComplete回调事件中处理Badge有无数量的逻辑，图片数据加载成功和解码成功时均触发该回调，示例代码如下：

@Entry
@Component
struct BadgeDemo {
  @State message: string = 'Hello World';
  @State sizes: string = '0';
  @State isDnd: boolean = false;

  build() {
    Row() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.isDnd = !this.isDnd;
        })
      Stack() {
        Badge({
          value: '',
          position: {
            x: 40,
            y: 0
          },
          style: {
            badgeSize: 15,
            badgeColor: Color.Red
          }
        }) {
          Image($r('app.media.startIcon'))
            .width(50)
            .height(50)
            .onComplete(() => {
              this.isDnd = !this.isDnd;
            })
        }
        .visibility(this.isDnd ? 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)
            .onComplete(() => {
              this.isDnd = !this.isDnd;
            })
        }
        .visibility(this.isDnd ? Visibility.None : Visibility.Visible)
      }
    }
    .height('100%')
  }
}

​