HarmonyOS NEXT——UI开发之badge角标的使用

1、概 述

badge小红点角标是我们项目开发中常见的需求，信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。效果如下：

2、Badge

接口定义如下：

根据数字创建标记组件；

Badge(value: BadgeParamWithNumber)

效果如下： 

根据字符串创建标记组件。

Badge(value: BadgeParamWithString)

效果如下： 

其中BadgeParamWithNumber与BadgeParamWithString都继承自BadgeParam，BadgeParam属性定义如下： 

其中，Position是枚举，定义如下： 

RightTop = 0 // 圆点显示在右上角。
Right = 1 // 圆点显示在右侧纵向居中。
Left = 2 // 圆点显示在左侧纵向居中。

BadgeStyle定义如下： 

3、案 例

由于BadgeParamWithNumber与BadgeParamWithString的区别只是显示的是数字还是字符串，因此以数字做简单示例。

演示效果如下（角标数值为0时，将不会显示角标）：

代码如下（8 ~ 12行）： 

// 该示例实现了Badge组件显隐时缩放
@Entry
@Component
struct Index {
  @State badgeCount: number = 0
  build() {
    Column({ space: 40 }) {
      Badge({
        count: this.badgeCount,
        style: {},
        position: BadgePosition.RightTop,
      }) {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
      }
      .width(55)
      Button('增加count').onClick(() => {
        this.badgeCount++;
      })
    }
    .margin({ top: 20 })
    .width('100%')
  }
}