Badge作用

APP里常见的功能是在一个tab的右上角展示未读消息99+，HarmonyOS就提供了实现该功能的组件器组件。该组件支持展示数字、数字超过100自动展示99+、文字。同时支持修改文字和数字的颜色，以及小圆点的背景色。还支持修改标记展示的位置、大小等。

实现效果

源码

import { IntroductionTitle } from '../../../../common/IntroductionTitle';
import { TitleBar } from '../../../../common/TitleBar';

@Extend(Row)
function rowStyle() {
  .margin(10)
  .width('100%')
  .borderRadius(14)
  .padding({ left: 12, right: 12 })
  .justifyContent(FlexAlign.SpaceBetween)
}

@Extend(Badge)
function badgeStyle() {
  .layoutWeight(1)
  .borderRadius(20)
  .margin({ left: 12, right: 12 })
  .backgroundColor($r('app.color.tab_bar_divider'))
}

@Entry
@Component
struct BadgeSample {
  build() {
    Column() {
      TitleBar({ title: $r('app.string.auxiliary_badge') })
      Scroll() {
        Column() {
          //标记类型
          IntroductionTitle({ introduction: $r('app.string.badge_type') })
          Row() {
            Badge({
              count: 1,
              style: {
                color: Color.Blue,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_number'))
            }
            .badgeStyle()

            Badge({
              value: 'new',
              style: {
                color: 0xFFFFFF,
                fontSize: 14,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_string'))
            }
            .badgeStyle()
          }//end row
          .rowStyle()

          //数字标记最大消息数
          IntroductionTitle({ introduction: $r('app.string.badge_max') })
          Row() {
            Badge({
              count: 10, // 设置提醒消息数100
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_number_normal'))
            }
            .badgeStyle()

            Badge({
              count: 100, // 设置提醒消息数100
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_number_max'))
            }
            .badgeStyle()
          }
          .rowStyle()

          // 标记位置
          IntroductionTitle({ introduction: $r('app.string.badge_location') })
          Row() {
            Badge({
              count: 1, // 设置提醒消息数
              position: BadgePosition.Left,
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_left'))
            }
            .badgeStyle()

            Badge({
              count: 1, // 设置提醒消息数
              position: BadgePosition.RightTop,
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_top'))
            }
            .badgeStyle()

            Badge({
              count: 1, // 设置提醒消息数
              position: BadgePosition.Right,
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 20,
                badgeColor: Color.Red }
            }) {
              this.TextContainer($r('app.string.badge_right'))
            }
            .badgeStyle()
          }
          .rowStyle()

          //标记样式
          IntroductionTitle({ introduction: $r('app.string.badge_style') })
          Row() {
            //蓝色大标记
            Badge({
              value: ' ',
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 24,
                badgeColor: Color.Blue }
            }) {
              this.TextContainer($r('app.string.badge_blue'))
            }
            .badgeStyle()

            //绿色小标记
            Badge({
              value: ' ',
              style: {
                color: 0xFFFFFF,
                fontSize: 16,
                badgeSize: 14,
                badgeColor: Color.Green }
            }) {
              this.TextContainer($r('app.string.badge_green'))
            }
            .badgeStyle()
          }
          .rowStyle()
        }
        .constraintSize({ minHeight: '100%' })
      }
    }
    .width('100%')
    .backgroundColor($r('app.color.background_shallow_grey'))
  }

  @Builder
  TextContainer(description: Resource) {
    Text(description)
      .maxLines(2)
      .fontSize(16).padding(8)
      .fontColor($r('app.color.font_color_shallow'))
      .textAlign(TextAlign.Center)
  }
}

参考资料

Badge API
源码传送门：
下载“语言-语言基础类库”，运行后进入：动画>专场动画>悬浮窗。即可看到运行效果。