1、概 述
badge小红点角标是我们项目开发中常见的需求，信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。效果如下：
2、Badge
接口定义如下：
👉🏻 根据数字创建标记组件；
Badge(value: BadgeParamWithNumber)效果如下：
👉🏻 根据字符串创建标记组件。
Badge(value: BadgeParamWithString)效果如下：
其中BadgeParamWithNumber与BadgeParamWithString都继承自BadgeParam，BadgeParam属性定义如下：
名称 |
类型 |
说明 |
position |
Position |
设置提示点显示位置。默认值：BadgePosition.RightTop |
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 = 0build() {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%')}}