鸿蒙中 信息提醒Badge组件

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、基础用法与核心 API

1. 数字标记（count 接口）

// 显示未读消息数（超过 maxCount 显示 99+）
Badge({
  count: 88,                     // 必填，消息数量
  maxCount: 99,                  // 可选，最大值阈值（默认99）
  position: BadgePosition.RightTop, // 标记位置
  style: {
    badgeSize: 20,               // 标记直径（单位vp）
    badgeColor: '#FF0000',        // 背景色
    color: '#FFFFFF',             // 文字颜色
    fontSize: 12                 // 文字大小
  }
}) {
  Image('message_icon.png')      // 被标记的子组件
    .width(30)
    .height(30)
}

关键特性：

• count ≤ 0 时自动隐藏标记 
• 非整数自动取整（如 5.5 → 5） 

2. 文本标记（value 接口）

Badge({
  value: 'New',                  // 必填，文本内容
  position: BadgePosition.Left,   // 左侧居中显示
  style: {
    badgeSize: 25,
    badgeColor: '#FFA500',        // 橙色背景
    borderWidth: 2,               // 边框宽度
    borderColor: '#000000'        // 黑色边框
  }
}) {
  Text('商品列表')
    .fontSize(16)
}

注意：value: '' 时仅显示红点

二、位置控制（BadgePosition 枚举）

位置选项	描述	示例效果
RightTop	右上角（默认位置）	右上角标记
Right	右侧纵向居中	右侧居中
Left	左侧纵向居中	左侧居中
自定义坐标	{ x: number, y: number }	精确控制偏移量

// 自定义坐标示例
Badge({
  count: 5,
  position: { x: 10, y: -5 },  // 从左上角偏移 (10vp, -5vp)
  style: { ... }
}) { ... }

三、样式深度定制（BadgeStyle 对象）

属性	类型	默认值	说明
badgeSize	number | string	16vp	标记直径
badgeColor	ResourceColor	Color.Red	背景色
color	ResourceColor	Color.White	文字颜色
fontSize	number | string	10vp	文字大小
fontWeight	FontWeight	Normal	字重（Bold/500等）
borderWidth	number	0	边框宽度
borderColor	ResourceColor	-	边框颜色

示例：带边框的标记

style: {
  badgeSize: 30,
  badgeColor: '#4CAF50',
  borderWidth: 2,
  borderColor: '#388E3C',
  fontSize: 14,
  fontWeight: FontWeight.Bold
}

四、高级特性（API 12+）

1. 缩放动画

@State badgeCount: number = 0

Badge({
  count: this.badgeCount, 
  style: { ... }
}) { ... }

Button('显示/隐藏').onClick(() => {
  this.badgeCount = this.badgeCount > 0 ? 0 : 10 // 切换时触发缩放动画
})

特性：

• 数值从 0 → 非零：放大显现
• 非零 → 0：缩小隐藏 

2. 动态样式绑定

@State isWarning: boolean = false

Badge({
  value: 'Alert',
  style: {
    badgeColor: this.isWarning ? '#FF5722' : '#4CAF50' // 根据状态变色
  }
})

五、使用规范与技巧

1. 子组件限制：
   • 仅支持包裹单个子组件（如图标/文本） 
   • 复杂布局需用容器嵌套：

     Column() {
       Badge(...) { Image(...) }
       Text('描述文字')
     }

六、完整示例：消息中心标记

@Entry
@Component
struct MessageBadgeDemo {
  @State unreadCount: number = 12

  build() {
    Row() {
      Badge({
        count: this.unreadCount,
        maxCount: 99,
        position: BadgePosition.RightTop,
        style: {
          badgeSize: 22,
          badgeColor: '#FF3A30',
          color: '#FFFFFF',
          fontSize: 12
        }
      }) {
        Image('message_icon.png')
          .width(40)
          .height(40)
      }
      
      Button('清空')
        .onClick(() => this.unreadCount = 0)
    }
  }
}

效果：

• 未读数 >99 时显示 "99+"
• 点击按钮触发缩放隐藏动画 

附：API 版本适配

特性	支持版本	元服务/卡片
基础数字/文本标记	API 7+	支持卡片
动画效果	API 12+	仅元服务
自定义坐标	API 9+	支持卡片