HarmonyOS 鸿蒙Next中Badge徽标与消息提示

HarmonyOS 鸿蒙Next中Badge徽标与消息提示 如何在 ArkUI 中使用 Badge 组件显示消息数量？如何自定义徽标的位置和样式？如何实现红点提示？如何动态更新徽标数量？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/HydroQuiz.git）

3 回复

Badge 组件用于在其他组件上显示徽标，常用于消息提示。

基础徽标：

Badge({
  count: this.unreadCount,
  position: BadgePosition.RightTop,
  style: {
    badgeSize: 16,
    badgeColor: '#FF4D4F',
    fontSize: 10,
    fontWeight: FontWeight.Normal
  }
}) {
  Image($r('app.media.icon_message'))
    .width(24)
    .height(24)
}

红点提示（无数字）：

Badge({
  value: '',
  position: BadgePosition.RightTop,
  style: {
    badgeSize: 8,
    badgeColor: '#FF4D4F'
  }
}) {
  Text('消息')
}

自定义位置徽标：

Stack() {
  Image($r('app.media.avatar'))
    .width(48)
    .height(48)
    .borderRadius(24)

  // 自定义位置的徽标
  if (this.isOnline) {
    Column()
      .width(12)
      .height(12)
      .borderRadius(6)
      .backgroundColor('#52C41A')
      .border({ width: 2, color: '#FFF' })
      .position({ x: 36, y: 36 })
  }
}

动态更新：

@State unreadCount: number = 0;

aboutToAppear(): void {
  // 监听消息数量变化
  messageService.onUnreadCountChange((count: number) => {
    this.unreadCount = count;
  });
}

Badge({
  count: this.unreadCount,
  maxCount: 99  // 超过99显示99+
}) {
  // 内容
}

更多关于HarmonyOS 鸿蒙Next中Badge徽标与消息提示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中Badge是UI组件，用于在应用图标或控件上显示未读消息数或状态提示。它通过数字、圆点或自定义图标实现。开发者使用@ohos.arkui.advanced.Badge模块创建，可设置位置、样式和数量。该组件独立于通知系统，需与具体控件绑定以更新显示。

在HarmonyOS Next的ArkUI中，使用Badge组件可以便捷地实现徽标与消息提示功能。以下是针对您问题的具体实现方法：

1. 显示消息数量

使用Badge组件包裹目标组件（如按钮、图标），并通过count属性设置数值即可显示消息数量。

Badge({
  count: 5,
  position: BadgePosition.RightTop,
  style: { color: '#FFFFFF', backgroundColor: '#FA2A2D' }
}) {
  Button('收件箱')
    .width(80)
    .height(40)
}

2. 自定义位置和样式

  • 位置调整：通过position属性设置，支持RightTop（默认）、Right、Left等8个方位。
  • 样式自定义：使用style属性配置颜色、尺寸、圆角等，也支持通过@Styles或@Extend进行复用。
// 自定义样式示例
@Styles function customBadgeStyle() {
  .width(24)
  .height(24)
  .fontSize(12)
}

Badge({
  count: 10,
  position: BadgePosition.Left,
  style: { 
    color: '#FFFFFF', 
    backgroundColor: '#007DFF',
    fontSize: 10,
    badgeSize: 20 
  }
}) {
  Image($r('app.media.icon_message'))
    .width(30)
    .height(30)
}

3. 实现红点提示

将count属性设置为0或使用Badge的dot模式即可显示红点。

// 方式一：count为0
Badge({ count: 0 }) {
  Button('通知')
}

// 方式二：使用dot模式（推荐）
Badge({ dot: true, style: { backgroundColor: '#FF0000' } }) {
  Image($r('app.media.icon_bell'))
}

4. 动态更新徽标数量

结合状态变量（@State）可实现动态更新。通过事件触发或定时任务修改状态变量，Badge会自动刷新。

@Entry
@Component
struct DynamicBadgeExample {
  @State messageCount: number = 3

  build() {
    Column() {
      Badge({
        count: this.messageCount,
        position: BadgePosition.RightTop
      }) {
        Button('收件箱')
          .onClick(() => {
            // 点击后数量减1
            if (this.messageCount > 0) {
              this.messageCount--
            }
          })
      }
      
      Button('模拟新消息')
        .onClick(() => {
          // 增加消息数量
          this.messageCount++
        })
    }
  }
}

关键特性说明

  • 灵活定位：Badge支持相对于被包裹元素的精准定位，可通过offset属性微调坐标。
  • 样式扩展：除内置样式外，支持自定义字体、背景渐变、边框等高级样式。
  • 性能优化：数量变化时仅触发局部渲染，适合高频更新场景。

在实际开发中，可根据交互需求选择count数值模式或dot红点模式。对于HydroQuiz这类应用，建议在消息图标上使用Badge组件，并通过状态管理实现实时更新。

回到顶部