鸿蒙UI开发——badge角标的使用

1、概 述

badge小红点角标是我们项目开发中常见的需求,信息标记组件,可以附加在单个组件上用于信息提醒的容器组件。效果如下:

2、Badge

接口定义如下:

👉🏻 根据数字创建标记组件;

复制代码
Badge(value: BadgeParamWithNumber)

效果如下:

👉🏻 根据字符串创建标记组件。

复制代码
Badge(value: BadgeParamWithString)

效果如下:

其中BadgeParamWithNumber与BadgeParamWithString都继承自BadgeParam,BadgeParam属性定义如下:

|----------|------------|------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 说明 |
| position | Position | 设置提示点显示位置。默认值:BadgePosition.RightTop 说明:Position作为入参,不支持设置百分比;设置为非法值时,默认(0,0)处理。(0,0)为组件左上角位置。 |
| style | BadgeStyle | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |

其中,Position是枚举,定义如下:

复制代码
RightTop = 0 // 圆点显示在右上角。Right = 1 // 圆点显示在右侧纵向居中。Left = 2 // 圆点显示在左侧纵向居中。

BadgeStyle定义如下:

|-------------|-------------------------------|----------------------------------------------------|
| 名称 | 类型 | 说明 |
| color | ResourceColor | 文本颜色。默认值:Color.White |
| fontSize | number | string | 文本大小。默认值:10单位:fp 说明:不支持设置百分比。 |
| badgeSize | number | string | Badge的大小。默认值:16单位:vp 说明:不支持设置百分比。当设置为非法值时,按照默认值处理。 |
| badgeColor | ResourceColor | Badge的颜色。默认值:Color.Red |
| fontWeight | number |FontWeight | string | 设置文本的字体粗细。默认值:FontWeight.Normal 说明:不支持设置百分比。 |
| borderColor | ResourceColor | 底板描边颜色。默认值:Color.Red |
| borderWidth | Length | 底板描边粗细。默认值:1单位:vp 说明:不支持设置百分比。 |

3、案 例

由于BadgeParamWithNumber与BadgeParamWithString的区别只是显示的是数字还是字符串,因此以数字做简单示例。

演示效果如下(角标数值为0时,将不会显示角标):

代码如下(8 ~ 12行):​​​​​​​

复制代码
// 该示例实现了Badge组件显隐时缩放@Entry@Componentstruct Index {  @State badgeCount: number = 0  build() {    Column({ space: 40 }) {      Badge({        count: this.badgeCount,        style: {},        position: BadgePosition.RightTop,      }) {        Image($r("app.media.startIcon"))          .width(50)          .height(50)      }      .width(55)      Button('增加count').onClick(() => {        this.badgeCount++;      })    }    .margin({ top: 20 })    .width('100%')  }}
相关推荐
万少4 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
网络小白不怕黑5 小时前
华为设备 QoS 流分类与流标记深度解析及实验脚本
网络·华为
网络小白不怕黑5 小时前
华为交换机堆叠与集群技术深度解析附带脚本
网络·华为
幽蓝计划17 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
共享ui设计和前端开发人才18 小时前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机18 小时前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机18 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
UI设计和前端开发从业者21 小时前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos