鸿蒙开发：信息标记组件

前言

本文基于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属性进行控制即可，而且针对信息的显示和隐藏，也不用过多的条件判断，可以说是非常的简单。