HarmonyOS 鸿蒙Next中如何实现Badge组件全场景应用？支持数字、文本、红点与动态控制
HarmonyOS 鸿蒙Next中如何实现Badge组件全场景应用？支持数字、文本、红点与动态控制
如何实现 HarmonyOS Badge 组件全场景应用？支持数字、文本、红点与动态控制
3 回复
我们在 HarmonyOS 应用开发中，Badge（角标）是提升用户体验的高频组件，常用于未读消息提醒、功能标记、状态提示等场景。支持自定义位置、颜色、尺寸，同时实现动态修改 Badge 状态的交互逻辑，适配多版本无额外依赖。这里就给大家一个基本的实现示例
一、核心点
1.多类型 Badge 全覆盖
数字型：支持最大显示数限制（超出显示99+），适配消息通知场景。
文本型：自定义标签内容（如New/Hot），满足功能标记需求。
红点型：无文案纯红点样式，用于极简的未读状态提醒。
2.高度自定义样式
支持配置 Badge 背景色、文本颜色、字体大小、尺寸、边框样式，以及角标位置（右上角 / 右侧居中）。
3.动态交互控制
可通过按钮点击实时修改 Badge 的数字、显示 / 隐藏状态，满足业务场景的动态更新需求。
4.自动隐藏机制
当数字型 Badge 的count ≤ 0时，组件自动隐藏；红点型可通过空字符串 /undefined控制显隐。
二、关键代码实现
- 数字型 Badge（消息通知场景）
核心是通过count属性设置数字，maxCount限制最大显示值，超出后自动显示maxCount+。
Badge({
count: this.messageCount, // 未读消息数
maxCount: 99, // 最大显示数，超出显示"99+"
position: BadgePosition.RightTop, // 角标位置：右上角
style: {
badgeColor: "#FF4444", // 角标背景色
color: "#FFFFFF", // 文本颜色
fontSize: 12, // 文本大小
badgeSize: 20 // 角标尺寸
}
}) {
// Badge挂载的目标组件（消息图标+文本）
Column() {
Image($r("sys.media.ic_grid_contacts"))
.width(40)
.height(40);
Text("消息")
.fontSize(14)
.margin({ top: 5 });
}
}
- 红点型 Badge
将value设为空字符串，配合小尺寸badgeSize，实现纯红点样式的未读提醒。
Badge({
value: "", // 空字符串实现纯红点
position: BadgePosition.RightTop,
style: {
badgeColor: "#FF4444", // 红点颜色
badgeSize: 8 // 红点尺寸（越小越精致）
}
}) {
Text("待处理事项")
.fontSize(16)
.width(150)
.height(40)
.backgroundColor("#F8F9FA")
.borderRadius(8)
.textAlign(TextAlign.Center)
.lineHeight(40);
}
三、完整代码
@Entry
@Component
struct BadgeComprehensiveDemo {
// 响应式状态：未读消息数（用于动态控制Badge）
@State messageCount: number = 128;
@State noticeCount: number = 3;
@State showRedDot: boolean = true;
build() {
Column() {
// 功能标题
Text("Badge组件全场景演示")
.fontSize(22)
.fontWeight(FontWeight.Bold)
.margin({ top: 30, bottom: 30 });
// 1. 数字型Badge（消息通知场景）
Text("数字型Badge：未读消息提醒")
.fontSize(14)
.margin({ left: 15, bottom: 8 })
.textAlign(TextAlign.Start)
.width("100%");
Row({ space: 50 }) {
// 普通数字Badge（超出maxCount显示“99+”）
Badge({
count: this.messageCount,
maxCount: 99, // 最大显示数，超出显示“99+”
position: BadgePosition.RightTop, // 右上角位置
style: {
badgeColor: "#FF4444", // Badge背景色
color: "#FFFFFF", // 文本颜色
fontSize: 12, // 文本大小
badgeSize: 20 // Badge尺寸
}
}) {
Column() {
Image($r("sys.media.ic_grid_contacts")) // 系统短信图标
.width(40)
.height(40);
Text("消息")
.fontSize(14)
.margin({ top: 5 });
}
}
// 小尺寸数字Badge（适配图标场景）
Badge({
count: this.noticeCount,
position: BadgePosition.RightTop,
style: {
badgeColor: "#3498DB",
color: "#FFFFFF",
fontSize: 10,
badgeSize: 16,
borderColor: "#FFFFFF", // 边框颜色
borderWidth: 2 // 边框宽度（实现镂空效果）
}
}) {
Image($r("sys.media.AI_playing")) // 系统通知图标
.width(40)
.height(40)
.backgroundColor("#F5F5F5")
.borderRadius(8);
}
}
.margin({ bottom: 30 });
// 2. 文本型Badge（功能标记场景）
Text("文本型Badge：自定义标签")
.fontSize(14)
.margin({ left: 15, bottom: 8 })
.textAlign(TextAlign.Start)
.width("100%");
Row({ space: 50 }) {
// “New”标签（右上角）
Badge({
value: "New", // 文本内容
position: BadgePosition.RightTop,
style: {
badgeColor: "#E67E22",
color: "#FFFFFF",
fontSize: 11,
badgeSize: 24,
fontWeight: FontWeight.Bold // 文本加粗
}
}) {
Column() {
Image($r("sys.media.AI_phone")) // 系统应用图标
.width(40)
.height(40);
Text("新功能")
.fontSize(14)
.margin({ top: 5 });
}
}
// “Hot”标签（右侧居中）
Badge({
value: "Hot",
position: BadgePosition.Right, // 右侧纵向居中
style: {
badgeColor: "#E74C3C",
color: "#FFFFFF",
fontSize: 11,
badgeSize: 22
}
}) {
Text("热门推荐内容")
.fontSize(16)
.width(150)
.height(40)
.backgroundColor("#F8F9FA")
.borderRadius(8)
.textAlign(TextAlign.Center)
.lineHeight(40);
}
}
.margin({ bottom: 30 });
// 3. 红点型Badge（未读入口场景）
Text("红点型Badge：无数值提醒")
.fontSize(14)
.margin({ left: 15, bottom: 8 })
.textAlign(TextAlign.Start)
.width("100%");
Badge({
value: "", // 空字符串实现纯红点
position: BadgePosition.RightTop,
style: {
badgeColor: "#FF4444",
badgeSize: 8 // 小红点尺寸
}
}) {
Text("待处理事项")
.fontSize(16)
.width(150)
.height(40)
.backgroundColor("#F8F9FA")
.borderRadius(8)
.textAlign(TextAlign.Center)
.lineHeight(40);
}
.margin({ bottom: 30 });
// 4. 动态控制演示（按钮交互）
Text("动态控制：修改Badge状态")
.fontSize(14)
.margin({ left: 15, bottom: 8 })
.textAlign(TextAlign.Start)
.width("100%");
Row({ space: 20 }) {
Button("消息数+10")
.width(120)
.onClick(() => {
this.messageCount += 10;
});
Button("重置消息数")
.width(120)
.onClick(() => {
this.messageCount = 0; // count≤0时Badge隐藏
});
Button("切换红点")
.width(120)
.onClick(() => {
this.showRedDot = !this.showRedDot;
});
}
// 动态红点演示
Badge({
value: this.showRedDot ? "" : undefined,
position: BadgePosition.RightTop,
style: {
badgeColor: "#FF4444",
badgeSize: 8
}
}) {
Text("动态红点开关")
.fontSize(16)
.width(150)
.height(40)
.backgroundColor("#F8F9FA")
.borderRadius(8)
.textAlign(TextAlign.Center)
.lineHeight(40)
.margin({ top: 15 });
}
}
.width("100%")
.height("100%")
.backgroundColor("#F5F5F5")
.padding(15);
}
}
四、效果展示
更多关于HarmonyOS 鸿蒙Next中如何实现Badge组件全场景应用？支持数字、文本、红点与动态控制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中，Badge组件通过@ohos.arkui.advanced.Badge模块实现全场景应用。支持数字、文本、红点三种样式，可通过count属性设置数字或文本，badgeColor自定义颜色。使用badgePosition调整位置，showBadge控制显示隐藏。动态控制可结合状态变量与事件响应实时更新Badge状态。
在HarmonyOS Next中，Badge组件通过@ohos.arkui.advanced.Badge模块提供，支持数字、文本、红点等多种形式，并具备动态控制能力，适用于通知计数、状态标记等全场景。以下是关键实现方法：
1. 基础使用
在ArkTS中导入模块并创建Badge，通常包裹在目标组件外：
import { Badge } from '@ohos.arkui.advanced.Badge'
@Entry
@Component
struct Index {
build() {
Row() {
Badge({
count: 5, // 数字徽章
position: BadgePosition.RIGHT_TOP,
style: { color: Color.White, backgroundColor: Color.Red }
}) {
Button('消息')
}
}
}
}
2. 支持多种徽章类型
- 数字徽章：通过
count属性设置，支持超过maxCount时显示maxCount+。 - 文本徽章：使用
label属性替代count，如label: 'NEW'。 - 红点徽章：仅设置
showDot: true，无需配置内容。 - 自定义样式：通过
style属性调整颜色、尺寸、圆角等。
3. 动态控制
- 使用
@State或@Link装饰器绑定数据，实现内容动态更新：
@State count: number = 0
Badge({ count: this.count }) {
Button('点击增加').onClick(() => { this.count++ })
}
- 可通过条件渲染控制显示/隐藏，例如结合业务逻辑动态切换徽章类型。
4. 全场景适配
- 通过
position属性调整徽章位置（如右上、左下），适应不同布局。 - 支持包裹任意组件（按钮、图标、列表项等），确保布局兼容性。
- 针对折叠屏、多端设备，可利用响应式布局与Badge的灵活定位适配。
5. 注意事项
- 避免过度使用徽章造成界面干扰，关键场景如未读消息、新功能提示等。
- 动态更新时考虑性能，高频变化场景建议使用增量更新。
通过上述方式，可高效实现Badge在全场景下的应用，满足数字、文本、红点的展示与动态交互需求。
