简介

Badge( )组件可以用来标记信息，可以附加在单个组件上用于信息提醒。简单来说，可以用来做角标的效果，就像咱们日常使用的软件右上角的消息数量一样。

该组件的完整使用方法请参考官方文档：Badge 组件

使用方法

首先，Badge( ) 组件使用时必须传参数，而且支持单个子组件。参数类型有两种：BadgeParamWithNumber 和 BadgeParamWithString，区别如下：

（1）BadgeParamWithNumber对象说明

（2）BadgeParamWithString对象说明

然后还有一些基础参数，具体如下：

关于 BadgeStyle 的对象说明在示例代码中做了简要说明，示例代码如下：

// Badge({ 配置参数调整角标 }){ 被角标压住的内容 }
Badge({
  // value / count 是角标的内容，二者只能填一个
  // value后面写字符串，count后面写数字
  // value: '1',
  count: 1,
  // style 是角标的样式
  position: BadgePosition.RightTop,
  style: {
    badgeColor: Color.Green, // Badge（圆圈）的颜色
    badgeSize: 40, // Badge（圆圈）的大小
    fontSize: 20, // Badge 内文字的大小
    color: Color.Yellow, // 文本颜色
    borderColor: Color.Green, // Badge（圆圈）描边的颜色
  }
}) {
  Image($r("app.media.startIcon"))
    .width(120)
}

效果如下图所示：

在参数中，使用 count 和  value 的区别是：如果数量为0，使用value是会正常显示的，但是使用count是不会显示的，示例代码如下：

Badge({
  count: 0,
  // style 是角标的样式
  position: BadgePosition.RightTop,
  style: {
    badgeColor: Color.Green, // Badge（圆圈）的颜色
    badgeSize: 40, // Badge（圆圈）的大小
    fontSize: 20, // Badge 内文字的大小
    color: Color.Yellow, // 文本颜色
    borderColor: Color.Green, // Badge（圆圈）描边的颜色
  }
}) {
  Image($r("app.media.startIcon"))
    .width(120)
}

Badge({
  value: '0',
  // style 是角标的样式
  position: BadgePosition.RightTop,
  style: {
    badgeColor: Color.Green, // Badge（圆圈）的颜色
    badgeSize: 40, // Badge（圆圈）的大小
    fontSize: 20, // Badge 内文字的大小
    color: Color.Yellow, // 文本颜色
    borderColor: Color.Green, // Badge（圆圈）描边的颜色
  }
}) {
  Image($r("app.media.startIcon"))
    .width(120)
}

效果如下图所示：

完整代码请点击git链接 Badge( )组件 获取，如有写的不全面的地方欢迎大家补充指正。