HarmonyOS ArkUI Badge 徽标与 Chip 标签：消息红点、数字徽标与可选中标签

发布时间：2026/10/11 13:14:01

HarmonyOS ArkUI Badge 徽标与 Chip 标签：消息红点、数字徽标与可选中标签
系列鸿蒙 HarmonyOS 6.1 新特性实战 · 第 39 篇Badge徽标用于在图标或按钮上附加消息计数、红点提醒或文字标记Chip标签则用于展示可操作的关键词标签。本篇演示 Badge 的数字、文字、位置三个维度以及用自定义 Row 实现可关闭、可选中的 Chip 标签组。运行效果初始状态Badge 数字徽标和 Chip 标签列表点击 1 消息后徽标数字递增一、Badge 数字徽标State msgCount: number 5 Badge({ count: this.msgCount, // 数字徽标 maxCount: 99, // 超过显示 99 position: BadgePosition.RightTop, style: { badgeSize: 18, badgeColor: #e74c3c, fontSize: 11 } }) { Text(✉).fontSize(36) // 被包裹的内容 }点击按钮更新数字Button(1 消息) .onClick(() { this.msgCount Math.min(this.msgCount 1, 999) }) Button(清空) .onClick(() { this.msgCount 0 })当count为 0 时Badge 自动隐藏不需要条件渲染。二、文字徽标value 属性// 文字标签NEW、HOT 等 Badge({ value: NEW, position: BadgePosition.RightTop, style: { badgeSize: 16, badgeColor: #ff6600, fontSize: 10 } }) { Text(新功能).padding(8).backgroundColor(#f5f5f5).borderRadius(4) } // 红点只显示一个圆点 Badge({ value: this.redDot ? ● : , position: BadgePosition.RightTop, style: { badgeSize: 12, badgeColor: #e74c3c, fontSize: 8 } }) { Text().fontSize(36) }三、BadgePosition 位置// RightTop右上角最常用消息通知 Badge({ count: 1, position: BadgePosition.RightTop, style: {...} }) { ... } // Right右侧居中 Badge({ count: 1, position: BadgePosition.Right, style: {...} }) { ... } // Left左侧居中 Badge({ count: 1, position: BadgePosition.Left, style: {...} }) { ... }四、自定义 Chip 标签ArkUI 6.1 中Chip组件在某些 SDK 版本不可用可用Row Text自行实现State chips: string[] [ArkTS, HarmonyOS, ArkUI, NEXT, 鸿蒙] State chipActive: boolean[] [true, false, true, false, false] // 可关闭标签 Row({ space: 4 }) { Text(chip).fontSize(13).fontColor(#0066ff) Text(×).fontSize(14).fontColor(#0066ff).fontWeight(FontWeight.Bold) .onClick(() { const arr this.chips.filter((_: string, i: number) i ! idx) const aArr this.chipActive.filter((_: boolean, i: number) i ! idx) this.chips arr this.chipActive aArr }) } .padding({ left: 10, right: 8, top: 5, bottom: 5 }) .backgroundColor(#e8f0ff).borderRadius(16).border({ width: 1, color: #b3d1ff })ArkTS 的 ForEach 注意事项不能在 ForEach 的 UI builder 回调内声明const变量因为Row没有flexWrap多个 Chip 需要按行拆分到不同 Row 容器// 分两行渲染避免 Row 没有 flexWrap 的限制 Column({ space: 8 }) { Row({ space: 8 }) { ForEach(this.chips.slice(0, 3), (chip: string, idx: number) { Row({ space: 4 }) { Text(chip).fontSize(13).fontColor(#0066ff) Text(×).fontSize(14).fontColor(#0066ff) .onClick(() { const arr this.chips.filter((_: string, i: number) i ! idx) this.chips arr }) } .padding({ left: 10, right: 8, top: 5, bottom: 5 }) .backgroundColor(#e8f0ff).borderRadius(16) }) } Row({ space: 8 }) { ForEach(this.chips.slice(3), (chip: string, relIdx: number) { Row({ space: 4 }) { Text(chip).fontSize(13).fontColor(#0066ff) Text(×).fontSize(14).fontColor(#0066ff) .onClick(() { // 用 relIdx 3 代替 const idx relIdx 3ArkTS 限制 const arr this.chips.filter((_: string, i: number) i ! relIdx 3) this.chips arr }) } .padding({ left: 10, right: 8, top: 5, bottom: 5 }) .backgroundColor(#e8f0ff).borderRadius(16) }) } }可选中标签ForEach(this.chips, (chip: string, idx: number) { Text(chip) .fontSize(13) .fontColor(this.chipActive[idx] ? #fff : #0066ff) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(this.chipActive[idx] ? #0066ff : #e8f0ff) .borderRadius(16).border({ width: 1, color: #0066ff }) .onClick(() { const arr this.chipActive.slice() arr[idx] !arr[idx] this.chipActive arr }) })完整代码Entry Component struct Index { State msgCount: number 5 State redDot: boolean true State chips: string[] [ArkTS, HarmonyOS, ArkUI, NEXT, 鸿蒙] State chipActive: boolean[] [true, false, true, false, false] build() { Scroll() { Column({ space: 20 }) { Text(Badge 徽标与 Chip 标签组件) .fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1a1a1a) // Badge 数字徽标 Column({ space: 16 }) { Text(一、Badge 数字徽标).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) Row({ space: 32 }) { Column({ space: 6 }) { Badge({ count: this.msgCount, maxCount: 99, position: BadgePosition.RightTop, style: { badgeSize: 18, badgeColor: #e74c3c, fontSize: 11 } }) { Text(✉).fontSize(36) } Text(消息).fontSize(12).fontColor(#666) } Column({ space: 6 }) { Badge({ count: 3, maxCount: 99, position: BadgePosition.RightTop, style: { badgeSize: 16, badgeColor: #e74c3c } }) { Text().fontSize(36) } Text(购物车).fontSize(12).fontColor(#666) } Column({ space: 6 }) { Badge({ value: this.redDot ? ● : , position: BadgePosition.RightTop, style: { badgeSize: 12, badgeColor: #e74c3c, fontSize: 8 } }) { Text().fontSize(36) } Text(通知).fontSize(12).fontColor(#666) } } .width(100%).justifyContent(FlexAlign.SpaceEvenly).alignItems(VerticalAlign.Bottom) Row({ space: 8 }) { Button(1 消息).fontSize(12).height(36).backgroundColor(#e8f0ff).fontColor(#0066ff) .onClick(() { this.msgCount Math.min(this.msgCount 1, 999) }) Button(清空).fontSize(12).height(36).backgroundColor(#fff0f0).fontColor(#e74c3c) .onClick(() { this.msgCount 0 }) Button(this.redDot ? 关红点 : 开红点).fontSize(12).height(36) .backgroundColor(#e8f0ff).fontColor(#0066ff) .onClick(() { this.redDot !this.redDot }) } } .padding(12).backgroundColor(#fff).borderRadius(8).width(100%) .border({ width: 1, color: #e0e0e0 }).alignItems(HorizontalAlign.Start) // Chip 标签 Column({ space: 12 }) { Text(二、Chip 标签可关闭 / 可选中).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) Text(关闭标签点 × 删除).fontSize(13).fontColor(#555) Column({ space: 8 }) { Row({ space: 8 }) { ForEach(this.chips.slice(0, 3), (chip: string, idx: number) { Row({ space: 4 }) { Text(chip).fontSize(13).fontColor(#0066ff) Text(×).fontSize(14).fontColor(#0066ff).fontWeight(FontWeight.Bold) .onClick(() { this.chips this.chips.filter((_: string, i: number) i ! idx) this.chipActive this.chipActive.filter((_: boolean, i: number) i ! idx) }) } .padding({ left: 10, right: 8, top: 5, bottom: 5 }) .backgroundColor(#e8f0ff).borderRadius(16).border({ width: 1, color: #b3d1ff }) }) } Row({ space: 8 }) { ForEach(this.chips.slice(3), (chip: string, relIdx: number) { Row({ space: 4 }) { Text(chip).fontSize(13).fontColor(#0066ff) Text(×).fontSize(14).fontColor(#0066ff).fontWeight(FontWeight.Bold) .onClick(() { this.chips this.chips.filter((_: string, i: number) i ! relIdx 3) this.chipActive this.chipActive.filter((_: boolean, i: number) i ! relIdx 3) }) } .padding({ left: 10, right: 8, top: 5, bottom: 5 }) .backgroundColor(#e8f0ff).borderRadius(16).border({ width: 1, color: #b3d1ff }) }) } } if (this.chips.length 0) { Button(重置标签).fontSize(13).height(38).backgroundColor(#0066ff).fontColor(#fff) .onClick(() { this.chips [ArkTS, HarmonyOS, ArkUI, NEXT, 鸿蒙] this.chipActive [true, false, true, false, false] }) } Text(筛选标签点击切换).fontSize(13).fontColor(#555) Row({ space: 8 }) { ForEach(this.chips, (chip: string, idx: number) { Text(chip).fontSize(13) .fontColor(this.chipActive[idx] ? #fff : #0066ff) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(this.chipActive[idx] ? #0066ff : #e8f0ff) .borderRadius(16).border({ width: 1, color: #0066ff }) .onClick(() { const arr this.chipActive.slice() arr[idx] !arr[idx] this.chipActive arr }) }) } } .padding(12).backgroundColor(#fff).borderRadius(8).width(100%) .border({ width: 1, color: #e0e0e0 }).alignItems(HorizontalAlign.Start) } .padding(20).width(100%) } .width(100%).height(100%).backgroundColor(#f5f5f5) } }API 速查组件/属性说明Badge({ count, maxCount, position, style })数字徽标count0 自动隐藏Badge({ value, position, style })文字徽标‘NEW’、‘HOT’ 等BadgePosition.RightTop / Right / Left徽标位置style.badgeSize徽标圆圈大小style.badgeColor徽标背景色小结Badge count0 自动隐藏不需要用if条件判断是否显示 BadgeArkUI 没有内置 Chip 组件6.1 部分版本用Row Text Text(×)可以完美模拟Row 没有 flexWrap多行标签需要手动拆 Row或改用 Flex 组件ForEach UI 回调内不能声明 const需要在回调内计算的索引用表达式relIdx 3内联上一篇Select 与 TextPicker 选择器 | 下一篇RichEditor 富文本编辑器内联样式与 Span 管理

相关新闻

HarmonyOS ArkUI Select 与 TextPicker 选择器：下拉、滚筒与省市联动

HarmonyOS ArkUI Select 与 TextPicker 选择器：下拉、滚筒与省市联动

系列：鸿蒙 HarmonyOS 6.1 新特性实战 第 38 篇 Select（下拉选择器）和 TextPicker（滚筒选择器）是两种互补的选择组件：Select 适合选项多、界面紧凑的场景；TextPicker 适合连续值或较少选项的滚动…

2026/10/11 12:12:48 阅读更多 →
日志系统的设计：从 console.log 到结构化日志

日志系统的设计：从 console.log 到结构化日志

日志系统的设计：从 console.log 到结构化日志 一、console.log 在什么时候不够用 开发阶段,console.log 是最直接的调试工具。打印请求参数、输出中间结果,在本地跑一下就知道发生了什么。这个习惯在部署到生产环境后,往往延续下来——生产代码里依然充斥着 console…

2026/10/11 13:13:58 阅读更多 →
AI外贸获客系统：企业如何利用AI提升海外客户开发效率？

AI外贸获客系统：企业如何利用AI提升海外客户开发效率？

随着全球贸易环境不断变化，外贸企业正在寻找更加高效的客户开发方式。过去，外贸企业主要依靠人工完成客户开发流程。销售人员寻找目标市场。销售人员收集客户资料。销售人员联系潜在客户。销售人员持续跟进合作机会。这种方式长期以来发挥了重要作用。但…

2026/10/3 2:35:03 阅读更多 →

最新新闻

健身动作错误归因数据集：专注关节抖动、遮挡漂移与小目标定位

健身动作错误归因数据集：专注关节抖动、遮挡漂移与小目标定位

简介：本资源是面向计算机视觉开发者与运动健康AI研究者的健身动作关键点检测专用数据集，聚焦于自下而上类动作识别与姿态评估，解决健身动作自动判别、姿势纠错与虚拟教练系统构建等核心问题。数据集共1758张真实场景图像（含训练/验…

2026/10/11 13:13:51 阅读更多 →
Flutter TON交互库鸿蒙化适配：桥接方案与踩坑实践

Flutter TON交互库鸿蒙化适配：桥接方案与踩坑实践

最近我接手了一个比较有意思的适配任务：把一个 Flutter 生态里常用的 TON 链上交互库 ton_dart 搬到鸿蒙应用里，还要在实际场景中跑通资产查询、转账还有 TON 治理投票的链路。ton_dart 这个库在 Dart 世界里算是 TON 相关功能最全的三方库之一&#xff…

2026/10/11 13:13:51 阅读更多 →
Flutter三方库鸿蒙化适配实战：以yaml_modify为例的配置资产管理方案

Flutter三方库鸿蒙化适配实战：以yaml_modify为例的配置资产管理方案

1. 项目背景：为什么偏偏是 yaml_modify 需要鸿蒙化适配如果你最近接过 Flutter 跨平台工程迁移到鸿蒙（HarmonyOS NEXT）的活儿，大概率会遇到一个尴尬的局面：Dart 侧纯逻辑的包基本都能顺利跑起来，因为 Flutt…

2026/10/11 13:13:51 阅读更多 →
DeepSeek V4还能更省！用TaoToken统一Key把prefix-cache命中率拉到99.82%的编程Agent配置实录

DeepSeek V4还能更省！用TaoToken统一Key把prefix-cache命中率拉到99.82%的编程Agent配置实录

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 13:13:51 阅读更多 →
Pygame 推箱子实战：2D 网格游戏完整开发链路

Pygame 推箱子实战：2D 网格游戏完整开发链路

简介：这份资源是面向Python初学者与游戏开发入门者的Pygame推箱子项目源码包，围绕经典推箱子玩法，帮助读者理解2D游戏开发的基本流程与核心机制。压缩包共21个文件，约3.32MB，包含1个main.py主程序、2个dat关卡数据、6个…

2026/10/11 13:13:51 阅读更多 →
Open Science Desktop的ACP协议详解：与Codex、Claude Code、Zed双向互通的原理与实践

Open Science Desktop的ACP协议详解：与Codex、Claude Code、Zed双向互通的原理与实践

【免费下载链接】open-science Open Science Desktop — local-first, model-agnostic AI research workbench for macOS, Windows & Linux. Open-source Claude Science desktop alternative built on Tauri MCP agent skills. 项目地址： https://gitcode.co…

2026/10/11 13:12:50 阅读更多 →

日新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 10:45:37 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 21:32:20 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/10 10:38:42 阅读更多 →