【HarmonyOS 6】卡片布局实战：打造精美的信息展示界面

【HarmonyOS 6】卡片布局实战：打造精美的信息展示界面

发布时间：2026/7/22 23:24:24

【HarmonyOS 6】卡片布局实战：打造精美的信息展示界面
前言卡片Card是移动应用中最常用的模块。它将相关信息组织在一个独立的容器中通过各种各样的视觉元素营造出层次分明、易于浏览的界面效果。在本文中我们将通过一个实际案例展示如何在HarmonyOS应用中实现各种类型的卡片布局。本应用中的卡片类型在我们的健康管理应用中使用了多种类型的卡片健康评分卡片展示综合评分和各项分数数据统计卡片展示饮水、运动、打卡等数据快捷入口卡片提供快速导航功能建议列表卡片展示健康建议让我们逐一学习这些卡片的实现方法。一、健康评分卡片这是应用首页最重要的卡片展示用户的综合健康评分。1.1 卡片结构1.2 完整代码// 健康评分卡片Column(){Row(){// 左侧评分圆环Stack(){// 背景圆环Progress({value:100,total:100,type:ProgressType.Ring}).width(this.getRingSize()).height(this.getRingSize()).color($r(app.color.primary_surface)).style({strokeWidth:this.getRingStrokeWidth()})// 进度圆环Progress({value:this.healthScore.totalScore,total:100,type:ProgressType.Ring}).width(this.getRingSize()).height(this.getRingSize()).color($r(app.color.primary_color)).style({strokeWidth:this.getRingStrokeWidth()})// 中心文字Column(){Row(){Text(this.healthScore.totalScore.toString()).fontSize(36).fontWeight(FontWeight.Bold).fontColor($r(app.color.primary_dark))Text(/100).fontSize(12).fontColor($r(app.color.text_secondary)).margin({bottom:4})}.alignItems(VerticalAlign.Bottom)Text(今日总评).fontSize(12).fontColor($r(app.color.text_secondary))}}// 右侧分项进度Column(){// 打卡进度Row(){Text(打卡).fontSize(12).fontColor($r(app.color.text_secondary)).width(32)Progress({value:this.healthScore.checkInScore,total:100,type:ProgressType.Linear}).height(8).color($r(app.color.primary_color)).backgroundColor($r(app.color.input_background)).layoutWeight(1).borderRadius(4)Text(${Math.round(this.healthScore.checkInScore*0.25)}/25).fontSize(12).fontColor($r(app.color.text_primary)).width(36).textAlign(TextAlign.End)}.width(100%).margin({top:10})// 饮水进度类似结构// 运动进度类似结构// 睡眠进度类似结构}.layoutWeight(1).padding({left:24})}.width(100%)// 底部说明文字Text(满分100 打卡25 饮水25 运动25 睡眠25).fontSize(12).fontColor($r(app.color.text_primary)).width(100%).margin({top:12})}.width(100%).padding(24).margin({left:16,right:16}).backgroundColor($r(app.color.card_background)).borderRadius(20)1.3 布局的要点左右分栏布局左侧固定宽度圆环大小右侧使用layoutWeight(1)占据剩余空间圆环叠加使用Stack实现多层叠加底层是背景圆环浅色上层是进度圆环主题色最上层是中心文字进度条布局标签固定宽度32进度条使用layoutWeight(1)自适应数值固定宽度36并右对齐1.4 响应式设计// 圆环大小根据屏幕调整privategetRingSize():number{returngetValueByBreakpoint(this.currentBreakpoint,newBreakpointValuenumber(100,120,140));}// 圆环线宽根据屏幕调整privategetRingStrokeWidth():number{returngetValueByBreakpoint(this.currentBreakpoint,newBreakpointValuenumber(10,12,14));}// 卡片内边距根据屏幕调整privategetCardPadding():number{returngetValueByBreakpoint(this.currentBreakpoint,newBreakpointValuenumber(20,24,28));}二、数据统计卡片这类卡片用于展示单一数据指标简洁明了。2.1 卡片结构2.2 完整代码Row(){// 饮水卡片Column(){Text(饮水).fontSize(14).fontColor($r(app.color.text_secondary))Row(){Text(this.waterCurrent.toString()).fontSize(28).fontWeight(FontWeight.Bold).fontColor($r(app.color.water_blue))Text(ml).fontSize(12).fontColor($r(app.color.text_secondary)).margin({left:4,bottom:4})}.alignItems(VerticalAlign.Bottom).margin({top:8})}.width(31%).padding({top:20,bottom:20,left:16,right:16}).backgroundColor($r(app.color.water_surface)).borderRadius(16).alignItems(HorizontalAlign.Start)// 运动卡片Column(){Text(运动).fontSize(14).fontColor($r(app.color.text_secondary))Row(){Text(this.exerciseMinutes.toString()).fontSize(28).fontWeight(FontWeight.Bold).fontColor($r(app.color.accent_color))Text(分钟).fontSize(12).fontColor($r(app.color.text_secondary)).margin({left:4,bottom:4})}.alignItems(VerticalAlign.Bottom).margin({top:8})}.width(31%).padding({top:20,bottom:20,left:16,right:16}).backgroundColor($r(app.color.food_surface)).borderRadius(16).alignItems(HorizontalAlign.Start)// 打卡卡片Column(){Text(打卡).fontSize(14).fontColor($r(app.color.text_secondary))Row(){Text(this.checkInCount.toString()).fontSize(28).fontWeight(FontWeight.Bold).fontColor($r(app.color.primary_color))Text(/${this.checkInTotal}).fontSize(12).fontColor($r(app.color.text_secondary)).margin({left:4,bottom:4})}.alignItems(VerticalAlign.Bottom).margin({top:8})}.width(31%).padding({top:20,bottom:20,left:16,right:16}).backgroundColor($r(app.color.primary_surface)).borderRadius(16).alignItems(HorizontalAlign.Start)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left:16,right:16,top:16})2.3 布局的要点三等分布局每个卡片宽度 31%留出间距使用justifyContent(FlexAlign.SpaceBetween)均匀分布自动计算卡片间距数值与单位对齐使用Row包裹数值和单位数值大字号、粗体、彩色单位小字号、灰色使用alignItems(VerticalAlign.Bottom)底部对齐颜色区分每个卡片使用不同的背景色数值颜色与背景色相呼应形成视觉上的分类效果2.4 响应式宽度// 响应式宽度配置.width(getValueByBreakpoint(this.currentBreakpoint,newBreakpointValuestring(31%,31%,32%)))在大屏上可以稍微增加宽度减少间距。三、快捷入口卡片快捷入口卡片提供快速导航功能通常使用按钮样式。3.1 卡片结构3.2 完整代码Column(){Text(快捷入口).fontSize(16).fontWeight(FontWeight.Medium).fontColor($r(app.color.text_primary)).width(100%)Row(){this.QuickBtn(打卡,$r(app.color.primary_surface),$r(app.color.primary_color),()this.switchToTab(1))this.QuickBtn(饮水,$r(app.color.water_blue_light),$r(app.color.water_blue),()this.switchToTab(2))this.QuickBtn(运动,$r(app.color.exercise_surface),$r(app.color.accent_color),()this.switchToTab(3))this.QuickBtn(睡眠,$r(app.color.sleep_surface),$r(app.color.sleep_purple),()this.switchToTab(4))}.width(100%).justifyContent(FlexAlign.SpaceBetween).margin({top:16})}.width(100%).padding({left:16,right:16,top:16})BuilderQuickBtn(label:string,bgColor:ResourceColor,textColor:ResourceColor,onClick:()void){Column(){Text(label).fontSize(14).fontColor(textColor)}.width(23%).height(50).justifyContent(FlexAlign.Center).backgroundColor(bgColor).borderRadius(12).onClick(onClick)}3.3 布局的要点四等分布局每个按钮宽度 23%留出间距使用justifyContent(FlexAlign.SpaceBetween)均匀分布按钮样式固定高度50圆角12背景色与文字色搭配居中对齐Builder 封装将重复的按钮结构封装为 Builder通过参数传递标签、颜色、点击事件提高代码复用性3.4 响应式高度privategetQuickBtnHeight():number{returngetValueByBreakpoint(this.currentBreakpoint,newBreakpointValuenumber(50,56,64));}四、建议列表卡片建议列表卡片用于展示多条文本信息。4.1 卡片结构4.2 完整代码Column(){Text(今日建议).fontSize(16).fontWeight(FontWeight.Medium).fontColor($r(app.color.text_primary)).width(100%)Column(){ForEach(this.suggestions,(suggestion:string,index:number){Row(){Column().width(6).height(6).backgroundColor($r(app.color.primary_dark)).borderRadius(3)Text(suggestion).fontSize(14).fontColor($r(app.color.text_primary)).margin({left:12}).layoutWeight(1)}.width(100%).padding({top:12,bottom:12})})}.width(100%).padding(20).margin({top:16}).backgroundColor($r(app.color.card_background)).borderRadius(16)}.width(100%).padding({left:16,right:16,top:16,bottom:16})4.3 布局的要点列表项结构使用ForEach遍历数据每项包含圆点和文字圆点固定宽度6文字使用layoutWeight(1)自适应圆点设计使用Column创建圆点宽高相等6x6圆角为宽度的一半3使用主题色间距设计列表项上下内边距12圆点与文字间距12整体卡片内边距20总结通过本文的学习我们了解了如何在 HarmonyOS 应用中实现各种类型的卡片布局并且我们结合实际案例讲解了四种卡片的具体实现。

相关新闻

Android应用换肤的终极解决方案：AndroidChangeSkin深度解析与实战指南

Android应用换肤的终极解决方案：AndroidChangeSkin深度解析与实战指南

Android应用换肤的终极解决方案：AndroidChangeSkin深度解析与实战指南 【免费下载链接】AndroidChangeSkin 一种完全无侵入的换肤方式，支持插件式和应用内，无需重启Activity. 项目地址: https://gitcode.com/gh_mirrors/an/AndroidChangeSk…

2026/7/22 23:24:24阅读更多 →
解锁家庭音乐共享：用musikcube打造跨平台流媒体服务器

解锁家庭音乐共享：用musikcube打造跨平台流媒体服务器

解锁家庭音乐共享：用musikcube打造跨平台流媒体服务器 【免费下载链接】musikcube a cross-platform, terminal-based music player, audio engine, metadata indexer, and server in c 项目地址: https://gitcode.com/gh_mirrors/mu/musikcube 你是否厌倦了…

2026/7/22 23:24:24阅读更多 →
AI 模型水印与溯源技术深度解析：从 Kirchenbauer 绿名单到 SynthID 的内容可信认证与知识产权保护体系

AI 模型水印与溯源技术深度解析：从 Kirchenbauer 绿名单到 SynthID 的内容可信认证与知识产权保护体系

AI 模型水印与溯源技术深度解析：从 Kirchenbauer 绿名单到 SynthID 的内容可信认证与知识产权保护体系 核心痛点：随着 ChatGPT、Claude、Gemini 等大模型深度融入内容生产与软件工程链路，AI 生成文本/图像/视频的真实性鉴别、模型本身的知识产权归属、训练数据的合法溯源成为…

2026/7/22 23:22:23阅读更多 →
200行代码硬核读取ext4磁盘文件

200行代码硬核读取ext4磁盘文件

我们可能听说过很多文件系统，比如 FAT32、NTFS、EXT4，在linux 下 EXT4 是一个使用比较广泛的文件系统，前面的小节我们简单介绍了 EXT4 文件系统的内部结构，这个小节我们用硬核方式读取 EXT4 文件系统下 /etc/hosts 文件&#xff0…

2026/7/23 0:20:34阅读更多 →
2026年最新英语写作批改平台挑选指南 附实用避坑技巧

2026年最新英语写作批改平台挑选指南 附实用避坑技巧

文章摘要：随着英语写作批改需求快速增长，市场上涌现了大量智能批改工具，但质量参差不齐，普通用户往往难以甄别。本文旨在帮助读者厘清核心评估维度，从技术能力、场景适配、合规安全等角度系统梳理挑选标准，…

2026/7/23 0:20:34阅读更多 →
2026 Cloudflare 5秒盾解决指南：无限验证码、403拦截与Bot检测优化方法

2026 Cloudflare 5秒盾解决指南：无限验证码、403拦截与Bot检测优化方法

在2026年的企业数字化运营中，公开数据采集、自动化测试、SEO监控已成为核心基础设施。然而，随着 Cloudflare 将其防护机制全面升级为以 Turnstile（无感验证） 和 AI 驱动的行为生物识别（Behavioral Biometrics&#xff…

2026/7/23 0:20:34阅读更多 →
损失函数与训练细节——这些坑我替你踩过了

损失函数与训练细节——这些坑我替你踩过了

先聊聊 Loss 函数。语义分割最基础的 Loss 是 Cross-Entropy（交叉熵），简单粗暴，逐像素计算分类损失。但你很快会发现一个问题——类别不平衡。Cityscapes 里“道路”和“建筑”占了画面大半江山，而“摩托车”、“自行车…

2026/7/23 0:18:34阅读更多 →
Java volatile 到底解决什么问题:可见性、禁止重排与双重检查锁单例

Java volatile 到底解决什么问题:可见性、禁止重排与双重检查锁单例

Java volatile 到底解决什么问题:可见性、禁止重排与双重检查锁单例 面试问 volatile,十有八九会答「保证可见性、不保证原子性」。这话没错,但真到写代码时就懵了:什么时候该加 volatile?为什么单例的双重检查锁一定要加它?加了 volatile 的 count 为什么还是会错?这篇把这…

2026/7/23 0:18:34阅读更多 →
Agent编排：别再纠结选LangChain还是LangGraph了

Agent编排：别再纠结选LangChain还是LangGraph了

内容速览章节核心内容一、编排到底是什么Workflow vs Agent、编排在架构中的位置二、七种编排模式Prompt Chaining / Routing / Parallelization / ReAct / Plan-and-Execute / Orchestrator-workers / Evaluator-Optimizer三、生产环境绕不开的问题会话管理、并发控制、错误分…

2026/7/23 0:18:34阅读更多 →
Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/22 0:53:59阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 0:53:59阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/22 0:53:59阅读更多 →
Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具 【免费下载链接】chitchatter Secure peer-to-peer chat that is serverless, decentralized, and ephemeral 项目地址: https://gitcode.com/gh_mirrors/ch/chitchatter Chitchatter是一款革命性的安…

2026/7/23 0:00:28阅读更多 →
从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击： https://intelliparadigm.com 第一章：从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表） 当AI副业主理人不再仅满足于单次服务交付，而是主动构建可复用、可裂变、可…

2026/7/23 0:00:28阅读更多 →
油泥处理设备哪里能买到

油泥处理设备哪里能买到

油泥处理设备哪里有？这是许多从事油田、炼化、清罐业务的从业者最关心的问题。根据河南三丰环保设备有限公司的行业经验，选购油泥处理设备的核心在于设备能否适配当地环保法规与原料特性，而非单纯看价格。该公司总经理王钦田先生指出&#xf…

2026/7/23 0:00:28阅读更多 →
YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

如果你在部署 YOLOv8 时，发现推理速度只有可怜的 1-2 FPS，而别人的演示视频却能跑到 30 FPS 以上，那么问题很可能不在模型本身，而在于你的整个处理链路。很多开发者拿到一个训练好的 YOLOv8 模型后，会直接使用官方示例…

2026/7/22 22:56:18阅读更多 →
Coze与Dify对比指南：低代码AI应用开发从入门到实战

Coze与Dify对比指南：低代码AI应用开发从入门到实战

1. 从零到一：为什么你需要了解 Coze 和 Dify？如果你对 AI 应用开发感兴趣，但一看到“大模型”、“智能体”、“工作流”这些词就头疼，觉得门槛太高，那这篇文章就是为你准备的。很多开发者，包括我自己&#…

2026/7/22 18:55:50阅读更多 →
AI生图工具怎么选？2026年6月版实测对比

AI生图工具怎么选？2026年6月版实测对比

做自媒体的朋友应该都有体会：配图一直是个让人头疼的问题。2026年，AI生图工具已经非常成熟了，但工具太多反而不知道怎么选。以下是截至2026年6月我对主流AI生图工具的实测对比。Midjourney V8.1：速度之王2026年6月11日&#xff0c…

2026/7/22 18:55:50阅读更多 →