文章目录前言Badge 是啥有什么用最基础的用法数字角标自定义样式边框、字重、最大值只显示小红点不要数字踩坑记录完整示例代码写在最后前言做 App 的时候消息数量提示这个需求几乎每个项目都有。我第一次在 HarmonyOS 上实现这个效果翻了一圈文档才发现有个现成的Badge组件直接包一下就行省了自己叠Stack布局手撸的功夫。今天把常用的几种玩法整理一下贴上真实代码省得你再去翻文档了。Badge 是啥有什么用说白了就是角标或者叫徽标。你手机上那个 App 图标右上角的小红点、微信消息数字都是这个东西。HarmonyOS 的Badge是一个容器组件用法是把它套在你想要加角标的子组件外面Badge 负责在右上角自动渲染那个数字或红点。不用自己搞定位不用自己算偏移量——这是我最喜欢它的一点。最终的效果演示如下最基础的用法数字角标先从最简单的来。给一张图片加个数字角标Statecount:number8;Badge({count:this.count,style:{badgeSize:16,badgeColor:#FA2A2D}}){Image($r(app.media.img)).width(60).height(60)}count就是要显示的数字style控制外观。badgeSize是角标圆形的直径单位 vpbadgeColor是背景色。这三行 style 配置就能出来一个标准的红色数字角标。自定义样式边框、字重、最大值实际项目里设计师肯定不满足于默认样式。Badge 的style对象支持不少属性Badge({count:this.count,maxCount:99,style:{fontSize:12,badgeSize:20,badgeColor:#FF6B00,fontWeight:FontWeight.Bold,borderWidth:2,borderColor:#FFFFFF}}){Image($r(app.media.img)).width(60).height(60)}几个关键属性说一下maxCount超过这个数就显示99不设的话数字有多大显示多大badgeSize角标整体圆形的直径不是字号调这个控制圆圈大小borderWidthborderColor加白色描边视觉上跟底图区分开尤其是深色图标下效果好橙色角标加白色描边这种组合在很多社交 App 上很常见显眼但不太突兀。只显示小红点不要数字有些场景不需要数字只需要告诉用户这里有新内容一个小红点就够了。Badge({count:this.count,style:{badgeSize:10,badgeColor:#FF0000,borderWidth:1.5,borderColor:#FFFFFF}}){Image($r(app.media.img_3)).width(60).height(60)}badgeSize设小一点比如 10就变成一个小圆点了。字号和数字视觉上就被压没了。踩坑记录用下来发现有几个地方值得注意1.badgeSize别设太小如果badgeSize比fontSize还小文字会被裁掉显示不全。一般badgeSize比fontSize至少大 4-6 vp 才够。2. Badge 子组件只能有一个Badge的大括号里只能放一个子组件放多个会直接报错。如果你想在一个复杂布局上加角标先把那个布局用Stack或者Column包一层再套 Badge。3. count 为 0 时角标还是会显示这个坑我掉进去过——用户读完消息后count 归零了但角标还在那儿。需要自己加判断count 为 0 时要隐藏 Badge。可以配合visibility属性或者条件渲染处理// 用条件渲染控制显隐if(this.count0){Badge({count:this.count,style:{...}}){Image(...)}}else{Image(...)}4. 动态更新 count因为count绑定的是State变量直接改 state 值就会触发 UI 更新这点没啥坑。但如果 count 来自网络请求记得在主线程更新 state不然 UI 不刷新这个是 ArkTS 的通用问题。完整示例代码把三种用法拼在一起跑起来可以直接对照效果EntryComponentstruct BadgeDemo{Statecount:number8;build(){Column({space:30}){// 基础红色数字角标Badge({count:this.count,style:{badgeSize:16,badgeColor:#FA2A2D}}){Image($r(app.media.img)).width(60).height(60)}// 橙色 白色描边 最大值限制Badge({count:this.count,maxCount:99,style:{fontSize:12,badgeSize:20,badgeColor:#FF6B00,fontWeight:FontWeight.Bold,borderWidth:2,borderColor:#FFFFFF}}){Image($r(app.media.img)).width(60).height(60)}// 纯小红点不显示数字Badge({count:this.count,style:{badgeSize:10,badgeColor:#FF0000,borderWidth:1.5,borderColor:#FFFFFF}}){Image($r(app.media.img_3)).width(60).height(60)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}写在最后Badge 这个组件整体上挺好用的API 简洁常见场景基本覆盖到了。唯一稍微要注意的就是 count 归零时的处理——官方没有自动隐藏的开关得自己做条件判断不然空角标挂在那里很奇怪。如果你的场景比较复杂比如需要在文字、按钮上加角标思路是一样的——把那个组件用 Badge 包起来就行Badge 本质上就是个装饰容器。有问题欢迎评论区交流。
HarmonyOS6 Badge 角标组件，5 分钟搞懂怎么用
文章目录前言Badge 是啥有什么用最基础的用法数字角标自定义样式边框、字重、最大值只显示小红点不要数字踩坑记录完整示例代码写在最后前言做 App 的时候消息数量提示这个需求几乎每个项目都有。我第一次在 HarmonyOS 上实现这个效果翻了一圈文档才发现有个现成的Badge组件直接包一下就行省了自己叠Stack布局手撸的功夫。今天把常用的几种玩法整理一下贴上真实代码省得你再去翻文档了。Badge 是啥有什么用说白了就是角标或者叫徽标。你手机上那个 App 图标右上角的小红点、微信消息数字都是这个东西。HarmonyOS 的Badge是一个容器组件用法是把它套在你想要加角标的子组件外面Badge 负责在右上角自动渲染那个数字或红点。不用自己搞定位不用自己算偏移量——这是我最喜欢它的一点。最终的效果演示如下最基础的用法数字角标先从最简单的来。给一张图片加个数字角标Statecount:number8;Badge({count:this.count,style:{badgeSize:16,badgeColor:#FA2A2D}}){Image($r(app.media.img)).width(60).height(60)}count就是要显示的数字style控制外观。badgeSize是角标圆形的直径单位 vpbadgeColor是背景色。这三行 style 配置就能出来一个标准的红色数字角标。自定义样式边框、字重、最大值实际项目里设计师肯定不满足于默认样式。Badge 的style对象支持不少属性Badge({count:this.count,maxCount:99,style:{fontSize:12,badgeSize:20,badgeColor:#FF6B00,fontWeight:FontWeight.Bold,borderWidth:2,borderColor:#FFFFFF}}){Image($r(app.media.img)).width(60).height(60)}几个关键属性说一下maxCount超过这个数就显示99不设的话数字有多大显示多大badgeSize角标整体圆形的直径不是字号调这个控制圆圈大小borderWidthborderColor加白色描边视觉上跟底图区分开尤其是深色图标下效果好橙色角标加白色描边这种组合在很多社交 App 上很常见显眼但不太突兀。只显示小红点不要数字有些场景不需要数字只需要告诉用户这里有新内容一个小红点就够了。Badge({count:this.count,style:{badgeSize:10,badgeColor:#FF0000,borderWidth:1.5,borderColor:#FFFFFF}}){Image($r(app.media.img_3)).width(60).height(60)}badgeSize设小一点比如 10就变成一个小圆点了。字号和数字视觉上就被压没了。踩坑记录用下来发现有几个地方值得注意1.badgeSize别设太小如果badgeSize比fontSize还小文字会被裁掉显示不全。一般badgeSize比fontSize至少大 4-6 vp 才够。2. Badge 子组件只能有一个Badge的大括号里只能放一个子组件放多个会直接报错。如果你想在一个复杂布局上加角标先把那个布局用Stack或者Column包一层再套 Badge。3. count 为 0 时角标还是会显示这个坑我掉进去过——用户读完消息后count 归零了但角标还在那儿。需要自己加判断count 为 0 时要隐藏 Badge。可以配合visibility属性或者条件渲染处理// 用条件渲染控制显隐if(this.count0){Badge({count:this.count,style:{...}}){Image(...)}}else{Image(...)}4. 动态更新 count因为count绑定的是State变量直接改 state 值就会触发 UI 更新这点没啥坑。但如果 count 来自网络请求记得在主线程更新 state不然 UI 不刷新这个是 ArkTS 的通用问题。完整示例代码把三种用法拼在一起跑起来可以直接对照效果EntryComponentstruct BadgeDemo{Statecount:number8;build(){Column({space:30}){// 基础红色数字角标Badge({count:this.count,style:{badgeSize:16,badgeColor:#FA2A2D}}){Image($r(app.media.img)).width(60).height(60)}// 橙色 白色描边 最大值限制Badge({count:this.count,maxCount:99,style:{fontSize:12,badgeSize:20,badgeColor:#FF6B00,fontWeight:FontWeight.Bold,borderWidth:2,borderColor:#FFFFFF}}){Image($r(app.media.img)).width(60).height(60)}// 纯小红点不显示数字Badge({count:this.count,style:{badgeSize:10,badgeColor:#FF0000,borderWidth:1.5,borderColor:#FFFFFF}}){Image($r(app.media.img_3)).width(60).height(60)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}写在最后Badge 这个组件整体上挺好用的API 简洁常见场景基本覆盖到了。唯一稍微要注意的就是 count 归零时的处理——官方没有自动隐藏的开关得自己做条件判断不然空角标挂在那里很奇怪。如果你的场景比较复杂比如需要在文字、按钮上加角标思路是一样的——把那个组件用 Badge 包起来就行Badge 本质上就是个装饰容器。有问题欢迎评论区交流。
