鸿蒙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%')  }}
相关推荐
zhanshuo9 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo9 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
白玉cfc12 小时前
【iOS】网易云仿写
ui·ios·objective-c
codefish79813 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
小马哥编程16 小时前
如何解决 undetected_chromedriver 启动慢问题
chrome·selenium·ui
yrjw19 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
帧栈20 小时前
开发避坑短篇(6):Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践
vue.js·ui·elementui
小徐不徐说1 天前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
吗喽对你问好1 天前
Android UI 控件详解实践
android·ui
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos