鸿蒙开发：信息标记组件

前言

本文基于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

 (value: BadgeParamWithNumber): BadgeAttribute;
 (value: BadgeParamWithString): BadgeAttribute;

BadgeParamWithNumber和BadgeParamWithString都是BadgeParam的子类，我们先看下BadgeParam中的属性，有两个属性，一个是positiion，类型是Badgepositiion/positiion，主要是设置提示点的显示位置，还有一个是style，类型是BadgeStyle，这是一个必须要传递的参数，主要是设置Badge组件的样式支持设置文本颜色、尺寸、圆点颜色和尺寸。

BadgeParamWithNumber中有两个属性，一个是count，类型是number，是必填的参数，主要作用于设置提醒消息数；还有一个是maxCount，类型是number，主要作用是设置最大消息数。

BadgeParamWithString中只有一个参数，value，类型是string，是一个必填参数，主要是设置提示内容的文本字符串。

Badgepositiion

BadgeStyle

实现一个简单的右上角消息标记案例：

@Entry
@Component
struct DemoPage {
  @State badgeCount: number = 1

  build() {
    Column() {
      Badge({
        count: this.badgeCount,
        style: {},
        positiion: Badgepositiion.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， 不需要我们在关注位置问题，我们通过positiion属性进行控制即可，而且针对信息的显示和隐藏，也不用过多的条件判断，可以说是非常的简单。

 转自：程序员一鸣

顺便给大家分享一下，民族企业大厂，前后端测试捞人，待遇给的还不错，感兴趣的可以来试试！