HarmonyOS应用开发实战：萌宠日记 - 心情分布 — 饼图与图例设计

发布时间：2026/10/19 7:39:26

HarmonyOS应用开发实战：萌宠日记 - 心情分布 — 饼图与图例设计
HarmonyOS应用开发实战萌宠日记 - 心情分布 — 饼图与图例设计前言心情分布图是数据统计页面中展示情绪占比的核心图表。在萌宠日记的StatisticsPage中心情分布使用图例列表展示每种心情的占比左侧为饼图占位后续可替换为真实饼图组件右侧为颜色图例 百分比让用户直观了解心情分布情况。本文将从萌宠日记中心情分布图的实现出发深入解析图例设计、颜色语义、百分比计算以及饼图占位的布局。一、心情分布实现// StatisticsPage.ets — 心情分布数据interfaceMoodStat{label:string// 心情标签percentage:number// 百分比color:string// 颜色}privatemoodStats:MoodStat[][{label:开心,percentage:60,color:#FFD54F},{label:平静,percentage:20,color:#81C784},{label:一般,percentage:10,color:#FFB74D},{label:难过,percentage:5,color:#64B5F6},{label:生气,percentage:5,color:#E57373}]二、图例渲染// 心情分布卡片Column({space:12}){Text(心情分布).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333).width(100%)Row({space:24}){// 饼图占位Column(){Text().fontSize(64)}.width(120).height(120).justifyContent(FlexAlign.Center)// 图例列表Column({space:8}){ForEach(this.moodStats,(stat:MoodStat){Row({space:8}){Circle().width(10).height(10).fill(stat.color)Text(stat.label).fontSize(13).fontColor(#666666).width(40)Text(${stat.percentage}%).fontSize(13).fontColor(#333333).fontWeight(FontWeight.Medium)}})}.alignItems(HorizontalAlign.Start)}.width(100%)}.width(100%).backgroundColor(#FFFFFF).borderRadius(16).padding(16).shadow({radius:4,color:#10000000,offsetY:2})三、图例颜色设计心情颜色色值寓意开心黄色#FFD54F快乐、阳光平静绿色#81C784平静、安宁一般橙色#FFB74D中性难过蓝色#64B5F6忧郁生气红色#E57373愤怒四、图例布局列组件内容第一列Circle颜色色块10×10第二列Text心情标签第三列Text百分比数值五、总结本文从萌宠日记的心情分布图实现出发深入解析了图例设计的完整方案数据模型MoodStat 接口图例渲染Circle 色块 标签 百分比颜色语义5 种心情对应 5 种颜色如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Circle 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-circleRow 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row7.1 属性对比属性类型必填默认值说明widthLength否100%组件宽度heightLength否自适应组件高度paddingPadding否0内边距marginMargin否0外边距backgroundColorColor否透明背景颜色borderRadiusLength否0圆角半径shadowShadow否无阴影效果6、常见问题与解决方案6.1 布局问题在实际开发中开发者经常会遇到布局相关的常见问题组件不显示检查是否设置了正确的宽高或父容器是否限制了子组件大小布局错乱检查alignItems和justifyContent设置是否正确滚动失效确认 Scroll 组件的高度是否被正确限制提示布局问题通常可以通过borderWidth: 1临时添加边框来定位问题区域。6.2 性能问题列表卡顿使用 LazyForEach 替代 ForEach 实现懒加载频繁刷新合理使用状态管理装饰器避免不必要的组件重绘内存泄漏在页面销毁时及时释放资源和取消订阅// 懒加载示例LazyForEach(this.dataSource,(item:DataItem){ListItem(){Text(item.name).fontSize(16)}},(item:DataItem)item.id.toString())7、最佳实践建议7.1 代码组织良好的代码组织可以显著提升项目的可维护性组件化设计将可复用的 UI 部分抽取为独立组件样式分离将常量和样式定义集中管理类型安全使用 interface 定义数据模型避免 any 类型7.2 性能优化减少不必要的重绘使用State时只声明需要响应式更新的变量合理使用布局避免过深的嵌套层级图片优化使用适当的图片格式和尺寸提示HarmonyOS 提供了一系列性能分析工具建议在开发过程中持续关注应用性能。8、与其他方案的对比8.1 方案对比对比维度本方案传统方案优势实现复杂度低中等更简洁维护成本低高更易维护扩展性好一般更灵活性能优秀良好更高效8.2 适用场景适合需要快速实现相关功能的场景不适合对性能有极致要求的场景需考虑其他方案总结本文从萌宠日记的实际开发案例出发深入解析了心情分布饼图与图例设计的实现方案。通过本文的学习读者可以掌握以下核心知识点组件用法理解相关 ArkUI 组件的核心属性和使用场景布局技巧掌握常见的布局模式及其适用范围交互实现学习点击事件、状态管理等交互设计方案最佳实践了解实际项目中的工程化实践和性能考量在实际开发中建议根据具体业务需求灵活调整组件参数和布局结构以达到最佳的用户体验效果。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textColumn 容器https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnRow 容器https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowScroll 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scrollTabs 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabsNavigation 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigationGrid 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridList 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listTextInput 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinputTextArea 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textarea6.1 完整示例代码以下是一个完整的实际应用示例展示了相关组件的综合使用// 完整的组件使用示例Componentexportstruct DemoComponent{Statemessage:stringHello HarmonyOSStatecount:number0build(){Column({space:16}){Text(this.message).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#333333)Text(点击次数:${this.count}).fontSize(16).fontColor(#666666)Button(点击增加).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).borderRadius(20).onClick((){this.count})}.width(100%).height(100%).padding(24).backgroundColor(#FFF8F0)}}6.2 状态管理代码// 状态管理示例StateisActive:booleanfalseProptitle:stringLinksharedValue:numberbuild(){Column(){Text(this.title).fontSize(18).fontColor(this.isActive?#F5A623:#999999)Button(this.isActive?取消:激活).onClick((){this.isActive!this.isActive})}}6.3 数据绑定与渲染// ForEach 循环渲染示例interfaceDataItem{id:numbername:stringicon:string}StatedataList:DataItem[][{id:1,name:示例一,icon:⭐},{id:2,name:示例二,icon:},{id:3,name:示例三,icon:✨}]build(){Column(){ForEach(this.dataList,(item:DataItem){Row({space:12}){Text(item.icon).fontSize(24)Text(item.name).fontSize(16)}.padding(12).width(100%)})}}6.4 样式与主题配置// 样式配置示例constThemeStyles{primaryColor:#F5A623,backgroundColor:#FFF8F0,cardBackground:#FFFFFF,textPrimary:#333333,textSecondary:#999999,borderRadius:12,spacing:16}StylesfunctionCardStyle(){.backgroundColor(ThemeStyles.cardBackground).borderRadius(ThemeStyles.borderRadius).shadow({radius:4,color:#10000000,offsetY:2})}

相关新闻

HarmonyOS应用开发实战：萌宠日记 - 数据备份与导出功能

HarmonyOS应用开发实战：萌宠日记 - 数据备份与导出功能

HarmonyOS应用开发实战：萌宠日记 - 数据备份与导出功能 前言 数据备份与导出 是保障用户数据安全的重要功能。在 萌宠日记 中，备份功能通过 ExtensionAbility（backup 类型） 实现系统级备份恢复，导出功能通过 文件 API…

2026/10/18 9:59:21 阅读更多 →
C/C++自动化交互编程：Expect库核心原理与实战应用

C/C++自动化交互编程：Expect库核心原理与实战应用

1. 项目概述：为什么要在C/C里用Expect？如果你写过C或C的自动化脚本，尤其是需要和命令行程序、交互式终端打交道的，肯定遇到过这样的场景：程序需要你输入密码，或者回答一个“yes/no”的确认，又或…

2026/10/15 21:05:30 阅读更多 →
jumamo本地语音生成工具部署与API调用全流程指南

jumamo本地语音生成工具部署与API调用全流程指南

这次我们来看一个名为 jumamo 的项目，从标题描述看，这应该是一个与语音生成或语音交互相关的工具。虽然标题本身带有调侃语气，但结合技术背景，jumamo 很可能是一个本地部署的语音模型，专注于文本到语音的转换&#xff…

2026/10/16 19:02:28 阅读更多 →

最新新闻

把Claude当成AI同事：一套减少返工的高效工作流搭建指南

把Claude当成AI同事：一套减少返工的高效工作流搭建指南

1. 为什么我决定把 Claude 当成"同事"而不是"搜索框"1.1 一个月的试验是怎么开始的事情要从上个月说起。那段时间我手头同时压着三个项目：一个老活动的复盘报告还没交，一个新上线的功能要赶推广方案，还有日常的周报、邮件…

2026/10/19 7:39:21 阅读更多 →
AIGC检测原理与降AI率实战：从困惑度到人工润色指南

AIGC检测原理与降AI率实战：从困惑度到人工润色指南

大概半年前，我在内容团队帮着审一批AI辅助产出的稿件。当时的流程很明确：先用AI搭出初稿，再人工做第二遍充实，最后统一过一遍AIGC检测工具。结果有一篇稿子让我印象很深——逻辑清楚、用词规范、结构完整，怎么看都挑不…

2026/10/19 7:39:21 阅读更多 →
降AI率实操指南：从检测原理到改写平台与提示词注入人味

降AI率实操指南：从检测原理到改写平台与提示词注入人味

2025年年底，一个朋友让我帮忙看看他给客户写的一版方案，说总感觉哪里不对。我看了三分钟就直说了：“这不是你自己写的吧？”他愣住，问我怎么知道的。我指了指开头那段——“综上所述，本方案旨在通过多维度协…

2026/10/19 7:39:21 阅读更多 →
NBA球员数据分析闭环：从爬虫到聚类可视化的工程化实践

NBA球员数据分析闭环：从爬虫到聚类可视化的工程化实践

简介：本资源是一份面向计算机专业本科生的Python数据可视化实战项目，专为毕业设计、课程设计及期末大作业打造，聚焦NBA球员多维数据的采集、清洗、聚类与动态可视化分析。项目代码全部手写，含详尽中文注释，覆盖数据爬虫…

2026/10/19 7:39:21 阅读更多 →
威利普LED-ECS编辑控制系统V5.3实用指南：屏参设置与节目下发

威利普LED-ECS编辑控制系统V5.3实用指南：屏参设置与节目下发

简介：威利普LED-ECS编辑控制系统V5.3免安装版专为LED图文控制卡用户打造，面向需要快速完成显示屏内容编辑与设备管理的企业、广告公司及个人使用者。压缩包解压即用，省去安装环节，适合在多台电脑间迁移，也降低环境配置…

2026/10/19 7:39:21 阅读更多 →
AI原生开发平台架构规划与落地实操指南

AI原生开发平台架构规划与落地实操指南

做技术交流的时候，被问得最多的一个问题，差不多就是标题这句：AI原生开发平台到底是什么、架构怎么规划、怎么落地。说实话，每次回答完我都觉得还有话没说完，因为这三个问题其实是层层递进的——概念不清就谈不上规划&a…

2026/10/19 7:38:21 阅读更多 →

日新闻

频率跟踪型PWM电源设计：臭氧发生器谐振点漂移与软开关实现

频率跟踪型PWM电源设计：臭氧发生器谐振点漂移与软开关实现

简介：本资源为电源技术方向的学术研究文档，聚焦介质阻挡放电型臭氧发生器电源的频率跟踪型PWM控制策略，面向电力电子、高压电源及臭氧应用领域的科研人员与工程技术人员。针对负载呈容性、等效电容随外加电压升高而增大、谐振频率随之漂移的难…

2026/10/19 0:00:47 阅读更多 →
Vibe Coding 遇上 TaoToken：把开发者思维圣殿的灵感流接入统一 Key 通道

Vibe Coding 遇上 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/19 0:00:47 阅读更多 →
HundredCV-Chat话题建模实战教程：利用4,871个内置话题标签构建主题分析系统

HundredCV-Chat话题建模实战教程：利用4,871个内置话题标签构建主题分析系统

【免费下载链接】HundredCV-Chat 项目地址： https://ai.gitcode.com/hf_mirrors/Jax-dan/HundredCV-Chat 点击查看 免费下载 HundredCV-Chat 是一个由 100 位青年简历数据开发而来的中文多轮对话数据集，共包含 24,750 组日常闲聊对话和 4,871 个话题标签…

2026/10/19 0:00:47 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/18 0:00:55 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/18 0:00:55 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/19 1:30:52 阅读更多 →

月新闻

我发现了一个新思路：用 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/19 2:54:50 阅读更多 →
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/17 17:22:31 阅读更多 →
黑夜航拍船只数据集训练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/18 12:16:16 阅读更多 →