HarmonyOS鸿蒙Next中想实现自定义的角标提醒，有现成的代码不？
HarmonyOS鸿蒙Next中想实现自定义的角标提醒，有现成的代码不？ 我需要在图标的右上脚实现那种红点的效果，如果用户有新的消息就显示，大家有现在的代码效果不。
// BadgeDemoPage.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct BadgeDemoPage {
@State messageCount: number = 5;
@State cartCount: number = 0;
@State selectedTabIndex: number = 0;
@State hasUpdate: boolean = true;
// 修改后的 @Builder，不再接收 badgeCount 参数
@Builder
BottomBarItem(icon: Resource, title: string, index: number) {
Column() {
Badge({
count: this.getBadgeCount(index),
position: BadgePosition.RightTop,
style: {
color: Color.White,
fontSize: 10,
badgeSize: 16,
badgeColor: '#FA2A2D'
}
}) {
Image(icon)
.width(28)
.height(28)
.fillColor(this.selectedTabIndex === index ? '#007DFF' : '#999999')
}
Text(title)
.fontSize(12)
.margin({ top: 4 })
.fontColor(this.selectedTabIndex === index ? '#007DFF' : '#999999')
}
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.selectedTabIndex = index;
switch (index) {
case 1: // 消息
this.messageCount = 0;
promptAction.showToast({ message: '所有消息已标记为已读' });
break;
case 2: // 购物车
promptAction.showToast({ message: `购物车有 ${this.cartCount} 件商品` });
break;
case 3: // 我的
if (this.hasUpdate) {
this.hasUpdate = false;
promptAction.showToast({ message: '您有新的系统更新' });
} else {
promptAction.showToast({ message: '进入我的页面' });
}
break;
default:
promptAction.showToast({ message: '已在首页' });
break;
}
})
}
// 新增一个辅助函数，让 @Builder 内部逻辑更清晰
private getBadgeCount(index: number): number {
switch (index) {
case 1: // 消息
return this.messageCount;
case 2: // 购物车
return this.cartCount;
case 3: // 我的
return this.hasUpdate ? 1 : 0;
default:
return 0;
}
}
build() {
Column() {
Row() {
Text('Badge 组件演示')
.fontSize(20)
.fontWeight(FontWeight.Medium)
}
.width('100%')
.height(56)
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)
.shadow({ radius: 4, color: '#1F000000', offsetY: 2 })
Scroll() {
Column() {
Text('状态信息卡片')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
Column() {
Row() {
Text('未读消息')
.fontSize(16)
Text(`${this.messageCount} 条`)
.fontSize(16)
.fontColor(this.messageCount > 0 ? '#FA2A2D' : '#999999')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ top: 12, bottom: 12 })
Divider().color('#F1F3F5')
Row() {
Text('购物车商品')
.fontSize(16)
Text(`${this.cartCount} 件`)
.fontSize(16)
.fontColor(this.cartCount > 0 ? '#FA2A2D' : '#999999')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ top: 12, bottom: 12 })
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(12)
.padding({ left: 20, right: 20 })
.shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 4 })
}
.width('100%')
.padding(16)
}
.layoutWeight(1)
.backgroundColor('#F5F5F5')
// 底部导航栏调用方式也相应改变
Row() {
this.BottomBarItem($r('sys.media.ohos_user_auth_icon_face'), '首页', 0)
this.BottomBarItem($r('sys.media.ohos_user_auth_icon_face'), '消息', 1)
this.BottomBarItem($r('sys.media.ohos_user_auth_icon_face'), '购物车', 2)
this.BottomBarItem($r('sys.media.ohos_user_auth_icon_face'), '我的', 3)
}
.width('100%')
.height(60)
.backgroundColor(Color.White)
.justifyContent(FlexAlign.SpaceEvenly)
.border({ width: { top: 0.5 }, color: '#E5E5E5' })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
onPageShow() {
setTimeout(() => {
this.messageCount++;
}, 2000);
setTimeout(() => {
this.cartCount++;
}, 3000);
}
}
可以直接运行看看是不是你想要的效果
更多关于HarmonyOS鸿蒙Next中想实现自定义的角标提醒，有现成的代码不？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
消息气泡
在ListItem中使用Badge组件可实现给列表项添加标记功能。Badge是可以附加在单个组件上用于信息标记的容器组件。例如，在消息列表中，若希望在联系人头像右上角添加标记，可在实现消息列表项ListItem的联系人头像时，将头像Image组件作为Badge的子组件。在Badge组件中，count和position参数用于设置需要展示的消息数量和提示点显示位置，还可以通过style参数灵活设置标记的样式。
实现方案
定义一个变量isNewMessage来标识是否需要给列表项添加标记功能，然后使用Badge组件给列表项添加标记功能。
示例代码
if (item.isNewMessage) {
// The Badge component can be used to add tags to list items.
Badge({
value: '',
position: BadgePosition.RightTop,
style: { badgeSize: 8, badgeColor: '#FA2A2D' }
}) {
Image(item.image)
.width(48)
.height(48)
}
} else {
Image(item.image)
.width(48)
.height(48)
}
背景知识：
可以使用 Badge 控件 来处理：
问题解决：
示例代码：
@State count:number = 1;
@Builder
showBadge(){
Badge({
count: this.count,
style: {},
position: BadgePosition.RightTop,
}) {
Image($r('app.media.ic_friend_sel'))
.width(50)
.height(50)
.onClick(()=>{
this.count++;
})
}
.width(55)
}
真机演示：
鸿蒙应用// 在build()方法中这样写 Column() { // …其他内容 Image($r(“app.media.your_icon”)) .width(64) .height(64) Badge({ count: newMessageCount, position: BadgePosition.RightTop }) .maxCount(99) // 超过99显示"99+" .styles({ badgeColor: Color.Red, // 红点颜色 textColor: Color.White, // 文字颜色 fontSize: 10, // 文字大小 }) // …其他内容 }
先确认你要的是 App 内某个头像/按钮右上角红点，还是桌面图标角标。两者不是一套能力：App 内红点直接用 ArkUI 的 Badge 或 Stack 叠一个圆点就行；桌面图标角标则属于通知/桌面角标能力，通常和 Push/通知消息数相关。
App 内实现可以这样做：外层 Stack({ alignContent: Alignment.TopEnd })，底层放头像或图标，右上角放一个小圆点/数字容器；如果只要消息数，Badge 更省事，可以配置 count/value、position 和样式。需要注意红点状态最好来自统一的未读数状态源，读完消息后同步清零；如果是桌面角标，不要只在页面里画 Badge，需要走系统支持的角标/通知路径。
有。HarmonyOS Next中可通过@ohos.badge模块调用setBadgeNumber()设置角标，或使用UI组件Badge直接绑定数字与样式。代码示例参见官方API文档中badge与Badge组件部分。
在HarmonyOS Next中，可以使用系统组件 Badge 快速实现红点角标提醒。以下是一个简单的代码示例：
@Entry
@Component
struct BadgeDemo {
@State hasNewMsg: boolean = true;
build() {
Column() {
Badge({
count: this.hasNewMsg ? '' : undefined, // 空字符串显示红点，不使用数字
position: BadgePosition.RightTop,
style: { badgeSize: 8, badgeColor: Color.Red }
}) {
Image($r('app.media.icon')) // 替换为你的图标
.width(40)
.height(40)
}
.onClick(() => {
this.hasNewMsg = !this.hasNewMsg; // 点击后清除红点
})
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
说明：
count设为空字符串时只显示红点，设为数字时可显示具体数量。BadgePosition可设置位置（如RightTop、Right等）。- 通过状态变量控制红点的显示与隐藏。
