HarmonyOS NEXT鸿蒙开发ArkUI:Badge信息标记组件(微信右上角未读消息提醒数量) 作者:马育民 • 2025-11-19 10:40 • 阅读:10007 # 介绍 [官网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) ### 应用场景 - 未读消息提醒 - 新版本提醒 # 使用 ### 子组件 支持 **单个** 子组件 **注意:**不要添加多个组件,否则只显示 **最后一个** # 接口 根据数字创建标记组件。 ``` 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