鸿蒙Badge容器的用法（附带实例）

HarmonyOS NEXT 的容器组件是界面设计中用于组织和布局子组件的基础元素。这些组件能够容纳其他组件，并按照特定的排列方式展示它们。

Badge 是声明式开发范式目前可供选择的容器组件之一，它是可以附加在单个组件上用于信息标记的容器组件。

Badge基础使用

给图片添加一个标识气泡，代码如下：

Column(){
   Badge({
     value:'',
     style:{
       badgeSize:10,                    // Badge的大小
       badgeColor:'#fa2a2d'             // Badge的颜色
     }
   }){
     Image($r('app.media.startIcon')).width(24).height(24)
   }
}

效果如下图所示：


图片右上角的小红点即为 Badge 设置的属性。Badge 中 style 对象的属性列举如下：

• color：文本颜色；
• fontSize：文本大小；
• badgeSize：Badge 的大小；
• badgeColor：Badge 的颜色；
• fontWeight：设置文本的字体粗细；
• borderColor：底板描边颜色；
• borderWidth：底板描边粗细。

Badge设置提示点显示位置

提示点的显示位置可以通过 position 来进行设置，目前仅支持 3 种，分别是：

• RightTop：显示在右上角；
• Right：显示在右侧纵向居中；
• Left：显示在左侧纵向居中。

示例代码如下：

Row(){
   Badge({
      value:'10',
      style:{
        color:'#ffffff',
       fontSize:'16vp',
       badgeSize:'16vp',
       badgeColor:Color.Red,
       fontWeight:FontWeight.Lighter,
       borderColor:Color.White,
       borderWidth:'1vp'
     },
     position:BadgePosition.Right                  // 设置提示点显示位置
   }){
      Text('设置提示点显示位置。').fontSize(16).height(18)
   }
}

效果如下图所示：

Badge设置提醒消息数

可以使用以下两个参数来设置提醒消息数：

• count：设置提醒消息数，小于或等于 0 时不显示信息标记；
• maxCount：最大消息数，超过最大消息数时仅显 maxCount+。

示例代码如下：

Row(){
  Badge({
    count:1000,
    maxCount:99,
    style:{
      badgeSize:'16vp',
      badgeColor:Color.Red,
    },
  }){
    Image($r('app.media.app_icon')).width(50).height(50)
  }
}

效果如下图所示：