鸿蒙OpenHarmony【Badge】信息展示

最新推荐文章于 2025-08-05 16:44:26 发布
原创 最新推荐文章于 2025-08-05 16:44:26 发布 · 1k 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #linux #数据库 #鸿蒙 #鸿蒙系统 #华为

可以附加在单个组件上用于信息标记的容器组件。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

支持单个子组件。

说明

子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else]、[ForEach]和[LazyForEach]）。

接口

Badge

Badge(value: BadgeParamWithNumber)

创建数字标记组件。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[BadgeParamWithNumber]是数字标记组件参数。

Badge

Badge(value: BadgeParamWithString)

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

从API version 12开始，该组件显隐时支持scale动效。

参数：

参数名类型必填说明
value[BadgeParamWithString]是字符串标记组件参数。

BadgeParam对象说明

包含创建Badge组件的基础参数。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
position[BadgePosition][Position10+]否
style[BadgeStyle]是Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

BadgeParamWithNumber对象说明

BadgeParamWithNumber继承自[BadgeParam]，具有BadgeParam的全部属性。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
countnumber是设置提醒消息数。**说明：**小于等于0时不显示信息标记。取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。
maxCountnumber否最大消息数，超过最大消息时仅显示maxCount+。默认值：99取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。

BadgeParamWithString对象说明

BadgeParamWithString继承自[BadgeParam]，具有BadgeParam的全部属性。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
valuestring是提示内容的文本字符串。

BadgePosition枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
RightTop0圆点显示在右上角。
Right1圆点显示在右侧纵向居中。
Left2圆点显示在左侧纵向居中。

BadgeStyle对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
color[ResourceColor]否文本颜色。默认值：Color.White
fontSizenumberstring否
badgeSizenumberstring否
badgeColor[ResourceColor]否Badge的颜色。默认值：Color.Red
fontWeight10+number[FontWeight]string
borderColor10+[ResourceColor]否底板描边颜色。默认值：Color.Red
borderWidth10+[Length]否底板描边粗细。默认值：1单位：vp**说明：**不支持设置百分比。

属性

支持[通用属性]

事件

支持[通用事件]

示例

示例1

// xxx.ets
@Entry
@Component
struct BadgeExample {
  @Builder tabBuilder(index: number) {
    Column() {
      if (index === 2) {
        Badge({
          value: '',
          style: { badgeSize: 6, badgeColor: '#FA2A2D' }
        }) {
          Image('/common/public_icon_off.svg')
            .width(24)
            .height(24)
        }
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
      } else {
        Image('/common/public_icon_off.svg')
          .width(24)
          .height(24)
          .margin({ bottom: 4 })
      }
      Text('Tab')
        .fontColor('#182431')
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  @Builder itemBuilder(value: string) {
    Row() {
      Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
      Text(value)
        .width(177)
        .height(21)
        .margin({ left: 15, right: 76 })
        .textAlign(TextAlign.Start)
        .fontColor('#182431')
        .fontWeight(500)
        .fontSize(16)
        .opacity(0.9)
      Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
    }.width('100%').padding({ left: 12, right: 12 }).height(56)
  }

  build() {
    Column() {
      Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
      Tabs() {
        TabContent()
          .tabBar(this.tabBuilder(0))
        TabContent()
          .tabBar(this.tabBuilder(1))
        TabContent()
          .tabBar(this.tabBuilder(2))
        TabContent()
          .tabBar(this.tabBuilder(3))
      }
      .width(360)
      .height(56)
      .backgroundColor('#F1F3F5')

      Column() {
        Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
        List({ space: 12 }) {
          ListItem() {
            Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 })
          }
          .width('100%')
          .height(56)
          .backgroundColor('#FFFFFF')
          .borderRadius(24)
          .align(Alignment.Start)

          ListItem() {
            Badge({
              value: 'New',
              position: BadgePosition.Right,
              style: { badgeSize: 16, badgeColor: '#FA2A2D' }
            }) {
              Text('list2').width(27).height(19).fontSize(14).fontColor('#182431')
            }.width(49.5).height(19)
            .margin({ left: 12 })
          }
          .width('100%')
          .height(56)
          .backgroundColor('#FFFFFF')
          .borderRadius(24)
          .align(Alignment.Start)
        }.width(336)

        Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
        List() {
          ListItem() {
            this.itemBuilder('list1')
          }

          ListItem() {
            Row() {
              Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
              Badge({
                count: 1,
                position: BadgePosition.Right,
                style: { badgeSize: 16, badgeColor: '#FA2A2D' }
              }) {
                Text('list2')
                  .width(177)
                  .height(21)
                  .textAlign(TextAlign.Start)
                  .fontColor('#182431')
                  .fontWeight(500)
                  .fontSize(16)
                  .opacity(0.9)
              }.width(240).height(21).margin({ left: 15, right: 11 })

              Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
            }.width('100%').padding({ left: 12, right: 12 }).height(56)
          }

          ListItem() {
            this.itemBuilder('list3')
          }

          ListItem() {
            this.itemBuilder('list4')
          }
        }
        .width(336)
        .height(232)
        .backgroundColor('#FFFFFF')
        .borderRadius(24)
        .padding({ top: 4, bottom: 4 })
        .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 })
      }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 })
    }.width('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例2

// 该示例实现了Badge组件显隐时缩放
@Entry
@Component
struct Index {
  @State badgeCount: number = 1

  build() {
    Column({ space: 40 }) {
      Badge({
        count: this.badgeCount,
        style: {},
        position: BadgePosition.RightTop,
      }) {
        Image($r("app.media.icon"))
        .width(50)
        .height(50)
      }
      .width(55)
      Button('count 0').onClick(() => {
        this.badgeCount = 0
      })
      Button('count 1').onClick(() => {
        this.badgeCount = 1
      })
    }
    .margin({top: 20})
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第十节HarmonyOS 常用容器组件1-Badge
yyxhzdm的博客
03-21 479
方法1：Badge(value:{count: number, position?方法2：Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。可以附加在单个组件上用于信息标记的容器组件。最大消息数，超过最大消息数时仅显示maxCount+。说明：小于等于0时不显示信息标记。圆点显示在右侧纵向居中。圆点显示在左侧纵向居中。设置提示点显示的位置。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Badge组件
zy0412326的专栏
02-22 949
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Badge组件。
【鸿蒙软件开发】ArkTS容器组件之Badge
m0_62599305的博客
10-30 1514
Badge组件：可以附加在单个组件上用于信息标记的容器组件。以上就是今天要讲的内容，本文介绍了Badge组件的使用，这个组件可以让用户快速得知信息数目，非常方便。
HarmonyOS ArkUI容器类组件-格栅布局容器（GridContainer）
m0_71263309的博客
04-22 569
ArkUI开发框架提供了纵向排布栅格布局容器 `GridContainer` ，它仅在栅格布局场景中使用。
鸿蒙OpenHarmony【LoadingProgress】信息展示
asfn123123的博客
11-12 1104
用于显示加载动效的组件。 加载动效在组件不可见时停止，组件的可见状态基于[onVisibleAreaChange]处理，可见阈值ratios大于0即视为可见状态。
HarmonyOS ArkUI容器类组件-角标组件（Badge）
m0_70748458的博客
05-30 706
position?maxCount?: number;position?Badge的构造方法允许接收和两种类型的参数，它们都继承自BadgeParamBadgeParamposition：设置 badge 的显示位置，提供了以下 3 种位置：Right： badge 显示在右侧纵向居中。RightTop（默认值）： badge 显示在右上角。Left： badge 显示在左侧纵向居中。style：设置 badge 的显示样式，BadgeStyle样式参数说明如下：color。
【鸿蒙开发】ArkUI容器类组件-角标组件（Badge）
huchenghe2的博客
11-15 871
position?maxCount?: number;position?Badge的构造方法允许接收和两种类型的参数，它们都继承自BadgeParamBadgeParamposition：设置 badge 的显示位置，提供了以下 3 种位置：Right： badge 显示在右侧纵向居中。RightTop（默认值）： badge 显示在右上角。Left： badge 显示在左侧纵向居中。style：设置 badge 的显示样式，BadgeStyle样式参数说明如下：color。
鸿蒙ArkTS容器组件：【Badge】
2401_82772199的博客
07-04 1136
可以附加在单个组件上用于信息标记的容器组件。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
OpenHarmony实战开发-如何使用Badge组件完成聊天未读消息数量显示功能
m0_70749039的博客
05-24 1010
开发者在业务开发过程中，需要通过角标的形式对用户的通知信息进行提示，并展示具体数量，如聊天页面中，用户可以看到与其他聊天对象的未读消息数量。本文就从聊天页面未读消息数量展示场景出发，介绍OpenHarmony中如何使用Badge组件实现该场景。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Badge）
m0_64420071的博客
03-14 1112
ArkTS声明式开发（容器组件：Badge）
跟着IBest-UI学HarmonyOS NEXT组件封装：Badge徽标
Ja_dream的博客
03-27 677
其中，我们看组件的第一个属性baseStyle：全局公共样式，通过绑定。@StorageLink，从API version 11开始，该装饰器支持在元服务中使用。在harmonyOS NEXT中，可以适用。让我们看下官方文档的说明本地修改发生，该修改会被写回AppStorage中。
HarmonyOS组件 容器组件-badge
m0_60786034的博客
05-15 227
badge 美[bædʒ] 英[bædʒ] n.徽章；标记；象征；证章 直白点讲就是控制控制各种图标的角标的组件 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 不支持 不支持 属性 除支持通用属性外，还支持如下属性： 名称 类型 默认值 ...
【带你轻松学】ArkUI容器类组件-角标组件（Badge）
2401_87677001的博客
09-26 403
position?maxCount?: number;position?Badge的构造方法允许接收和两种类型的参数，它们都继承自BadgeParamBadgeParamposition：设置 badge 的显示位置，提供了以下 3 种位置：Right： badge 显示在右侧纵向居中。RightTop（默认值）： badge 显示在右上角。Left： badge 显示在左侧纵向居中。style：设置 badge 的显示样式，BadgeStyle样式参数说明如下：color。
华为仓颉鸿蒙HarmonyOS NEXT原生UI 容器组件Badge（微信/QQ未读数小红点）
BinShaosir的专栏
12-24 815
微信和QQ的小红点强迫症看到这个就想点，看看仓颉鸿蒙HarmonyOS NEXT是怎么开发出来的吧！可以附加在单个组件上用于信息标记的容器组件。Badge暂不支持混合页面场景。如对您有帮助，帮忙点个“” 让更多的人受益~！技术交流群可加wx“”备注cangjie。
鸿蒙NEXT版实战开发：UI框架-Badge有数量与无数量切换时Image会发生闪动，怎么让它不闪动？
qq_39652397的博客
12-06 236
可以在onComplete回调事件中处理Badge有无数量的逻辑.......
鸿蒙案例-首页Tabs和顶部搜素栏的实现
weixin_67913109的博客
06-19 769
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。切换指定页签需要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。不支持一个TabsController控制多个Tabs组件。搜索框组件Search，适用于浏览器的搜索内容输入框等应用场景。
站在JS的角度，看鸿蒙中的ArkTs
最新发布
尽吾所能 分享永久免费知识
08-05 381
本文对比分析了JavaScript(JS)、TypeScript(TS)和ArkTS三大语言的核心特性。ArkTS作为鸿蒙专属语言，基于TS进行严格类型增强，具有静态强类型、禁用动态特性等特点，深度集成鸿蒙分布式能力。与JS/TS相比，ArkTS采用声明式UI开发范式，通过AOT编译实现接近原生的性能表现，特别适合复杂鸿蒙应用开发。尽管需要适应更严格的语法约束，但ArkTS在性能优化、代码维护性和鸿蒙特性支持方面具有显著优势，是鸿蒙原生应用开发的首选语言。
鸿蒙智选携手IAM进驻长隆熊猫村，为国宝打造智慧健康呼吸新空间
2501_91664978的博客
08-02 360
其中，作为空净领域十大品牌之一并升级为华为鸿蒙智选系列高端空净品牌的IAM，凭借其对消费需求的深刻洞察和持久的创新研发实力，成功入选“鸿蒙标准”的实践范例，为熊猫宝宝们精心打造了“主动健康空气解决方案”。大熊猫对栖息环境的温湿度极为敏感，适宜的空气环境是其健康生长的关键。7月29日，全球唯一大熊猫三胞胎“萌帅酷”迎来11周岁生日，华为鸿蒙智家携手其鸿蒙智选系列智慧家电品牌，为长隆野生动物世界的大熊猫三胞胎献上了特别的礼物——通过智慧科技为国宝打造更健康舒适的居住环境，让科技与自然奇妙相遇。
鸿蒙OS 系统安全
鹿鸣天涯
08-05 749
鸿蒙OS 系统安全 在搭载 HarmonyOS 的分布式终端上，可以保证“正确的人，通过正确的设备，正确地使用数据”。 • 通过“分布式多端协同身份认证”来保证“正确的人”。 • 通过“在分布式终端上构筑可信运行环境”来保证“正确的设备”。 • 通过“分布式数据在跨终端流动的过程中，对数据进行分类分级管理”来保证“正确地使用数据”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值