前言
本文基于Api13
信息标记，很是常见，比如手机桌面上的各种应用的右上角信息提示，微信的聊天中的消息未读提示等等，可以说非常常见。
手机桌面消息提示：
微信中的消息未读：
如此常见的一个功能，在实际的开发中，我们应该如何来实现呢？
当然了，实现方式具有很多种，比如使用Stack层叠组件，让信息提示组件在最顶层。
Stack() { Image($r("app.media.startIcon")) .width(50) .height(50) Text("1") .width(20) .height(20) .backgroundColor(Color.Red) .borderRadius(20) .fontColor(Color.White) .textAlign(TextAlign.Center) }.alignContent(Alignment.TopEnd)
效果如下：
当然了，你也可以使用相对布局RelativeContainer来实现。
RelativeContainer() { Image($r("app.media.startIcon")) .width(50) .height(50) .alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center }, center: { anchor: "__container__", align: VerticalAlign.Center } }) Text("1") .width(20) .height(20) .backgroundColor(Color.Red) .borderRadius(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End } }) }.width(60) .height(60)
以上的方式实现，都是最常见的多组件方式来实现，需要自己来去控制信息标记的位置，在鸿蒙开发中，除了以上的方式之外，还非常贴心的给出了信息标记组件Badge来实现。
信息标记组件Badge
信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。
源码中支持两种参数，一个是根据数字创建标记组件的BadgeParamWithNumber，一个是根据字符串创建标记组件的BadgeParamWithString。
(value: BadgeParamWithNumber): BadgeAttribute; (value: BadgeParamWithString): BadgeAttribute;
BadgeParamWithNumber和BadgeParamWithString都是BadgeParam的子类，我们先看下BadgeParam中的属性，有两个属性，一个是position，类型是BadgePosition/Position，主要是设置提示点的显示位置，还有一个是style，类型是BadgeStyle，这是一个必须要传递的参数，主要是设置Badge组件的样式支持设置文本颜色、尺寸、圆点颜色和尺寸。
BadgeParamWithNumber中有两个属性，一个是count，类型是number，是必填的参数，主要作用于设置提醒消息数；还有一个是maxCount，类型是number，主要作用是设置最大消息数。
BadgeParamWithString中只有一个参数，value，类型是string，是一个必填参数，主要是设置提示内容的文本字符串。
BadgePosition
名称 |
值 |
说明 |
RightTop |
0 |
圆点显示在右上角。 |
Right |
1 |
圆点显示在右侧纵向居中。 |
Left |
2 |
圆点显示在左侧纵向居中。 |
BadgeStyle
名称 |
类型 |
必填 |
说明 |
color |
ResourceColor |
否 |
文本颜色。 |
fontSize |
number /string |
否 |
文本大小。 |
badgeSize |
number/string |
否 |
Badge的大小。 |
badgeColor |
ResourceColor |
否 |
Badge的颜色。 |
fontWeight |
number/FontWeight/string |
否 |
设置文本的字体粗细。 |
borderColor |
ResourceColor |
否 |
底板描边颜色。 |
borderWidth |
Length |
否 |
底板描边粗细。 |
实现一个简单的右上角消息标记案例：
@Entry @Component struct DemoPage { @State badgeCount: number = 1 build() { Column() { Badge({ count: this.badgeCount, style: {}, position: BadgePosition.RightTop, }) { Image($r("app.media.startIcon")) .width(50) .height(50) } .width(55) Button("清空") .margin({ top: 10 }) .onClick(() => { this.badgeCount = 0 }) Button("累加") .margin({ top: 10 }) .onClick(() => { this.badgeCount += 1 }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } }
当count为0时，就不会显示右上角的信息提示，当然了，你也可以使用value来标记信息组件的内容。
相关总结
使用信息标记组件Badge，不需要我们在关注位置问题，我们通过position属性进行控制即可，而且针对信息的显示和隐藏，也不用过多的条件判断，可以说是非常的简单。
