文章目录harmonyOS 6 Badge 标记组件使用示例文档组件介绍示例代码功能说明核心API与参数1. Badge组件构造参数2. 关键枚举代码分段解析1. 红点标记Tabs标签栏2. 文本标记List列表项3. 数字标记List列表项4. 整体布局容器效果展示总结harmonyOS 6 Badge 标记组件使用示例文档组件介绍Badge标记组件是HarmonyOS ArkTS中用于在UI元素上展示角标、红点、数字/文本提示的容器组件常用于消息提醒、状态标记等场景如未读消息数、新功能提示、异常状态红点等。本文基于示例代码详细讲解Badge组件的核心使用方式。示例代码功能说明本示例代码展示了Badge组件三种典型使用场景红点标记Tabs标签栏中展示无数字/文本的红点提示文本标记List列表项中展示“New”文本提示数字标记List列表项中展示数字计数提示。核心API与参数1. Badge组件构造参数参数名类型说明valuestring文本类型标记内容如示例中的New与count互斥countnumber数字类型标记内容如示例中的1与value互斥positionBadgePosition标记位置可选值Right右侧、TopRight右上角默认等styleBadgeStyle标记样式包含badgeSize标记尺寸、badgeColor标记颜色等属性2. 关键枚举BadgePosition标记位置枚举示例中使用BadgePosition.Right右侧FlexAlign布局对齐枚举示例中用于Column的居中对齐Alignment组件对齐枚举示例中用于ListItem的内容对齐。代码分段解析1. 红点标记Tabs标签栏Builder tabBuilder(index: number) { Column() { if (index 2) { Badge({ value: , // 空值实现纯红点效果 style: { badgeSize: 6, badgeColor: #FA2A2D } // 红点尺寸6px红色 }) { Image(/common/public_icon_off.svg) .width(24) .height(24) } .width(24) .height(24) .margin({ bottom: 4 }) } else { // 非目标标签仅展示图标 Image(/common/public_icon_off.svg) .width(24) .height(24) .margin({ bottom: 4 }) } // 标签文本 Text(Tab) .fontColor(#182431) .fontSize(10) .fontWeight(500) .lineHeight(14) }.width(100%).height(100%).justifyContent(FlexAlign.Center) }说明通过value: 设置空文本结合badgeSize: 6实现小尺寸红点badgeColor: #FA2A2D设置红点为红色告警色仅在第3个Tabindex2展示红点其余Tab仅展示图标。2. 文本标记List列表项ListItem() { Badge({ value: New, // 文本标记内容 position: BadgePosition.Right, // 标记显示在文本右侧 style: { badgeSize: 16, badgeColor: #FA2A2D } // 标记尺寸16px红色 }) { Text(list2).width(27).height(19).fontSize(14).fontColor(#182431) }.width(49.5).height(19) .margin({ left: 12 }) }说明value: New设置文本标记用于提示“新内容”position: BadgePosition.Right指定标记在子组件Text右侧badgeSize: 16适配文本“New”的显示尺寸。3. 数字标记List列表项ListItem() { Row() { Image(common/public_icon.svg).width(32).height(32).opacity(0.6) Badge({ count: 1, // 数字标记内容 position: BadgePosition.Right, // 标记显示在文本右侧 style: { badgeSize: 16, badgeColor: #FA2A2D } // 标记尺寸16px红色 }) { Text(list2) .width(177) .height(21) .textAlign(TextAlign.Start) .fontColor(#182431) .fontWeight(500) .fontSize(16) .opacity(0.9) }.width(240).height(21).margin({ left: 15, right: 11 }) Image(common/public_icon_arrow_right.svg).width(12).height(24).opacity(0.6) }.width(100%).padding({ left: 12, right: 12 }).height(56) }说明count: 1设置数字标记用于提示“1条未读/未处理项”Badge包裹Text组件标记跟随文本展示结合Row布局与图标、箭头组成完整的列表项样式。4. 整体布局容器build() { Column() { // 红点标记展示区 Text(dotsBadge).fontSize(18).fontColor(#182431).fontWeight(500).margin(24) Tabs() { TabContent().tabBar(this.tabBuilder(0)) TabContent().tabBar(this.tabBuilder(1)) TabContent().tabBar(this.tabBuilder(2)) // 展示红点的Tab TabContent().tabBar(this.tabBuilder(3)) }.width(360).height(56).backgroundColor(#F1F3F5) // 文本/数字标记展示区 Column() { // 文本标记List Text(stringBadge).fontSize(18).fontColor(#182431).fontWeight(500).margin(24) List({ space: 12 }) { ... } // 数字标记List Text(numberBadge).fontSize(18).fontColor(#182431).fontWeight(500).margin(24) List() { ... } }.width(100%).backgroundColor(#F1F3F5).padding({ bottom: 12 }) }.width(100%) }运行效果如图说明整体采用Column纵向布局分“红点标记”“文本标记”“数字标记”三个区域Tabs组件实现标签栏布局List组件实现列表布局Badge作为子组件嵌入对应位置。效果展示区域效果描述dotsBadge4个Tab标签栏第3个Tab图标右上角显示6px红色红点无文本/数字stringBadge列表中第2项“list2”右侧显示16px红色背景的“New”文本标记numberBadge列表中第2项“list2”文本右侧显示16px红色背景的数字“1”标记总结value与count互斥Badge组件同时只能设置value文本或count数字不可同时设置尺寸适配badgeSize需根据标记内容调整如文本“New”需16px以上红点可设6-8px布局约束Badge包裹的子组件需设置明确的宽高避免标记位置偏移样式统一示例中统一使用#FA2A2D红色作为标记颜色符合移动端告警/提示的视觉规范。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力