HarmonyOS NEXT鸿蒙开发ArkUI：Badge信息标记组件（微信右上角未读消息提醒数量）-马育民老师

# 介绍

[官网API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-badge-V5 "官网API")

信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。

如下图，图标右上角红色数字：

[![](https://www.malaoshi.top/upload/0/0/1GW2FpRWtjst.png)](https://www.malaoshi.top/upload/0/0/1GW2FpRWtjst.png)

### 应用场景

- 未读消息提醒
- 新版本提醒

# 使用

### 子组件

支持 **单个** 子组件

**注意：**不要添加多个组件，否则只显示 **最后一个**

# 接口

根据数字创建标记组件。

```
Badge(value: BadgeParamWithNumber)
```

**参数：**

- value：`BadgeParamWithNumber` 类型，详见下面

# BadgeParamWithNumber对象说明

`BadgeParamWithNumber` 继承自 `BadgeParam`，具有  `BadgeParam` 的全部属性。

- count：`number`类型，必填，设置提醒消息数（红点中的数字）。小于等于0 **不显示信息标记**

- maxCount：`number` 类型，最大消息数，超过最大消息时仅显示maxCount+，如：`99+`。默认值：99

# BadgeParam对象说明

- style：`BadgeStyle` 类型（详见 [链接](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-badge-V5#badgestyle%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E "链接")），必填，可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

# 例子

```
@Entry
@Component
struct Index {
  // 定义counter组件的提示数量
  @State count:number = 0

build() {
    // 列示布局
    Column(){

Badge({
        count:this.count, // 必填红点中的数字，微信有3条消息未查看
        maxCount:99, // 最大值，微信有100条消息没查看，但也显示99
        style:{} // 必填，使用默认样式
      }){
        // 徽章必须依附在其他组件的右上角，所以还需要添加其他组件
        Image($r("app.media.startIcon"))
          .width(50)
        // 徽章组件中，不要添加多个组件，否则只显示最后一个
        // Button("提交")
      }

Row(){

Button("-")
          .onClick( ()=>{
            if(this.count >= 1){
              this.count --
            }
          })

Button("+")
          .onClick( ()=>{
            this.count ++
          })
      }

}

}
}
```

原文出处：http://malaoshi.top/show_1GW2Fq4pCYkM.html