鸿蒙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%')  }}
相关推荐
John_ToDebug3 小时前
定制 ResourceBundle 的实现与 DuiLib 思想在 Chromium 架构下的应用解析
c++·chrome·ui
我在看你呵呵笑4 小时前
GD32VW553-IOT开发板移植适配openharmony
物联网·华为·harmonyos
在人间耕耘5 小时前
HarmonyOS 开发学习分享:从入门到认证的完整路径
华为·harmonyos
萌新小码农‍6 小时前
Java分页 Element—UI
java·开发语言·ui
森之鸟6 小时前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir8 小时前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
℃CCCC10 小时前
请求库-axios
开发语言·华为·网络请求·harmonyos·deveco studio·axios请求·arkts编程
YoungUpUp11 小时前
【PS2025全网最新版】稳定版PS2025保姆级下载安装详细图文教程(附安装包)(Adobe Photoshop)
ui·adobe·photoshop·ps·平面设计·ps2025·adobephotoshop
光芒Shine11 小时前
【ArkTS-装饰器】
harmonyos