鸿蒙UI开发——badge角标的使用

1、概 述

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

2、Badge

接口定义如下：

👉🏻 根据数字创建标记组件；

Badge(value: BadgeParamWithNumber)

效果如下：

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

Badge(value: BadgeParamWithString)

效果如下：

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

名称	类型	说明
position	Position	设置提示点显示位置。默认值：BadgePosition.RightTop 说明：Position作为入参，不支持设置百分比；设置为非法值时，默认（0,0）处理。（0，0）为组件左上角位置。
style	BadgeStyle	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

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

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

BadgeStyle定义如下：

名称	类型	说明
color	ResourceColor	文本颜色。默认值：Color.White
fontSize	number | string	文本大小。默认值：10单位：fp 说明：不支持设置百分比。
badgeSize	number | string	Badge的大小。默认值：16单位：vp 说明：不支持设置百分比。当设置为非法值时，按照默认值处理。
badgeColor	ResourceColor	Badge的颜色。默认值：Color.Red
fontWeight	number |FontWeight | string	设置文本的字体粗细。默认值：FontWeight.Normal 说明：不支持设置百分比。
borderColor	ResourceColor	底板描边颜色。默认值：Color.Red
borderWidth	Length	底板描边粗细。默认值：1单位：vp 说明：不支持设置百分比。

3、案 例

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

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

代码如下（8 ~ 12行）：​​​​​​​

// 该示例实现了Badge组件显隐时缩放@Entry@Componentstruct 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%')  }}