HarmonyOS应用开发实战：萌宠日记 - 日记数量统计与柱状图绘制

发布时间：2026/10/11 19:52:08

HarmonyOS应用开发实战：萌宠日记 - 日记数量统计与柱状图绘制
HarmonyOS应用开发实战萌宠日记 - 日记数量统计与柱状图绘制前言日记数量统计是数据统计页面的核心功能通过柱状图直观展示每天的日记数量变化。在萌宠日记的StatisticsPage中柱状图使用Column 组件模拟绘制每根柱子的高度与数据值成正比搭配标题行和环比增长指示器形成完整的统计卡片。本文将从萌宠日记中日记数量统计与柱状图的实现出发深入解析柱状图的绘制原理、数据映射、以及统计卡片的布局设计。一、日记数量统计卡片// StatisticsPage.ets — 日记数量统计Column({space:8}){Text(日记数量).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333).width(100%)Row(){// 左统计数字Column({space:4}){Text(本月记录).fontSize(13).fontColor(#999999)Row({space:4}){Text(18).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#333333)Text(篇).fontSize(14).fontColor(#666666)}Text(比上月 6篇).fontSize(12).fontColor(#4CAF50)}.alignItems(HorizontalAlign.Start)Blank()// 右柱状图Row({space:4}){ForEach([3,5,4,7,6,8,5],(height:number){Column().width(16).height(height*8)// 高度与数值成正比.backgroundColor(#F5A623).borderRadius(4)})}.alignItems(VerticalAlign.Bottom).height(64)}.width(100%)}.width(100%).backgroundColor(#FFFFFF).borderRadius(16).padding(16).shadow({radius:4,color:#10000000,offsetY:2})二、柱状图绘制原理// 柱状图每根柱子高度 数据值 × 比例因子.height(height*8)// 8 为比例因子三、统计卡片布局区域内容说明标题日记数量16fp 加粗左列统计数字 环比本月记录 18 篇右列柱状图7 根柱子四、总结本文从萌宠日记的日记数量统计与柱状图绘制实现出发深入解析了统计柱状图的完整方案柱状图绘制Column 高度动态变化统计卡片标题 数字 图表数据映射数据值 × 比例因子如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Column 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnRow 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row7.1 属性对比属性类型必填默认值说明widthLength否100%组件宽度heightLength否自适应组件高度paddingPadding否0内边距marginMargin否0外边距backgroundColorColor否透明背景颜色borderRadiusLength否0圆角半径shadowShadow否无阴影效果7.2 布局属性对比布局方式适用场景主轴方向交叉轴对齐自动换行Column垂直排列竖直alignItems不支持Row水平排列水平alignItems不支持Flex灵活布局可配置alignItems支持Stack层叠布局无alignContent不支持Grid网格布局行列行列间距支持5、常见问题与解决方案5.1 布局问题在实际开发中开发者经常会遇到布局相关的常见问题组件不显示检查是否设置了正确的宽高或父容器是否限制了子组件大小布局错乱检查alignItems和justifyContent设置是否正确滚动失效确认 Scroll 组件的高度是否被正确限制提示布局问题通常可以通过borderWidth: 1临时添加边框来定位问题区域。5.2 性能问题列表卡顿使用 LazyForEach 替代 ForEach 实现懒加载频繁刷新合理使用状态管理装饰器避免不必要的组件重绘内存泄漏在页面销毁时及时释放资源和取消订阅// 懒加载示例LazyForEach(this.dataSource,(item:DataItem){ListItem(){Text(item.name).fontSize(16)}},(item:DataItem)item.id.toString())6、最佳实践建议6.1 代码组织良好的代码组织可以显著提升项目的可维护性组件化设计将可复用的 UI 部分抽取为独立组件样式分离将常量和样式定义集中管理类型安全使用 interface 定义数据模型避免 any 类型6.2 性能优化减少不必要的重绘使用State时只声明需要响应式更新的变量合理使用布局避免过深的嵌套层级图片优化使用适当的图片格式和尺寸提示HarmonyOS 提供了一系列性能分析工具建议在开发过程中持续关注应用性能。7、与其他方案的对比7.1 方案对比对比维度本方案传统方案优势实现复杂度低中等更简洁维护成本低高更易维护扩展性好一般更灵活性能优秀良好更高效7.2 适用场景适合需要快速实现相关功能的场景不适合对性能有极致要求的场景需考虑其他方案8、实际开发建议8.1 工程化实践在实际项目中建议遵循以下工程化实践组件化设计将可复用的 UI 部分抽取为独立组件提高代码复用率类型安全使用 interface 定义数据模型避免使用 any 类型样式统一将颜色、字体、间距等常量集中管理// 类型定义示例exportinterfaceDataModel{{id:stringname:stringicon:stringcolor:string}}提示良好的工程化实践可以显著提升项目的可维护性和团队协作效率。8.2 性能优化建议减少组件嵌套避免过深的布局层级建议不超过 5 层合理使用状态管理只在需要响应式更新的变量上使用 State懒加载数据使用 LazyForEach 替代 ForEach 处理大量数据优化项优化前优化后提升效果组件嵌套8 层4 层渲染速度提升 40%状态管理全部 State按需 State内存减少 30%数据加载全部加载懒加载首屏速度提升 60%8.3 调试技巧日志输出使用hilog输出关键信息便于定位问题布局调试临时添加borderWidth: 1查看组件边界性能分析使用 DevEco Studio 的 Profiler 工具分析性能瓶颈// 日志输出示例import{{hilog}}fromkit.PerformanceAnalysisKitconstDOMAIN0xFF00constTAGDemohilog.info(DOMAIN,TAG,调试信息: %{{public}}s,JSON.stringify(data))在开发过程中建议持续使用调试工具定位和解决问题而非等到最后统一排查。总结本文从萌宠日记的实际开发案例出发深入解析了日记数量统计与柱状图绘制的实现方案。通过本文的学习读者可以掌握以下核心知识点组件用法理解相关 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})}

相关新闻

Python异步编程深度解析：从生成器到协程

Python异步编程深度解析：从生成器到协程

异步编程是Python进阶路上的一道分水岭。很多人会用async/await，但遇到复杂场景就不知道怎么办了。这篇文章从底层原理讲起，帮你真正理解Python的异步编程。一、从同步到异步：为什么需要异步先看一个典型的同步代码：pythonimport …

2026/10/11 19:51:55 阅读更多 →
生化危机4重制版修改器下载及其用法解析

生化危机4重制版修改器下载及其用法解析

下载链接 《生化危机4：重制版》风灵月影修改器：三十六项全功能解析与REFramework前置 《生化危机4：重制版》采用Capcom RE引擎开发，在保留原作精华的基础上重构了战斗机制、经济系统和资源管理逻辑。风灵月影（FLiNG&a…

2026/10/2 7:02:59 阅读更多 →
【Logisim】4-2，8-3与16-4编码器的详细教程

【Logisim】4-2，8-3与16-4编码器的详细教程

1. 引言在数字逻辑电路设计中，编码器（Encoder）是一种将多个输入信号为更少输出线（二进制编码）的组合逻辑电路。它是多路复用器、键盘编码等应用的核心组件。在真实的芯片（如 74LS148）中&#xf…

2026/9/30 15:18:22 阅读更多 →

最新新闻

深入排查npm报错：Cannot read properties of null (reading ‘matches‘)的完整指南

深入排查npm报错：Cannot read properties of null (reading ‘matches‘)的完整指南

先别急着清缓存重装，这个报错我前后折腾过好几次，每次原因都不一样。先花两分钟把错误本身看明白，后面能省一大堆时间。1. 报错拆解：这行错误到底在说什么1.1 错误信息的语法结构这行报错是典型的 JavaScript TypeError&#xff0…

2026/10/11 19:51:46 阅读更多 →
涉密项目投标前需要准备什么材料？

涉密项目投标前需要准备什么材料？

企业准备参与涉密项目投标，除了常规商务和技术材料，还须额外准备一套保密资质与管理类材料。很多企业因为材料不全或不符合要求，在资格审查阶段就被淘汰。先说结论：涉密项目投标前须准备五大类材料 —— 资质资格类、业绩证明类、…

2026/10/11 19:51:46 阅读更多 →
企业终端软件安装管控：堵住私自安装带来的内网安全缺口

企业终端软件安装管控：堵住私自安装带来的内网安全缺口

某制造企业 IT 运维曾遭遇一次典型内网安全事件：研发部门员工从第三方网站下载破解版仿真工具安装到办公电脑，安装包捆绑木马程序。该员工电脑拥有内网访问权限，木马入侵后横向扩散，短时间内多台终端被感染，业务系统出…

2026/10/11 19:51:46 阅读更多 →
lil-agents 多屏适配实战：Dock 自动隐藏时角色为何不消失？DockVisibility 深度解析

lil-agents 多屏适配实战：Dock 自动隐藏时角色为何不消失？DockVisibility 深度解析

【免费下载链接】lil-agents tiny AI companions that live on your macOS dock 项目地址： https://gitcode.com/gh_mirrors/li/lil-agents 点击查看 免费下载 lil-agents 是一款小巧的 macOS 应用，让 Bruce 和 Jazz 两个可爱的 AI 伴侣角色住在你的 Do…

2026/10/11 19:51:46 阅读更多 →
Amical听写历史与智能笔记完整指南：如何搜索、内联编辑并复用你的语音内容

Amical听写历史与智能笔记完整指南：如何搜索、内联编辑并复用你的语音内容

【免费下载链接】amical 🎙️ AI Dictation App - Open Source and Local-first ⚡ Type 3x faster, no keyboard needed. 🆓 Powered by open source models, works offline, fast and accurate. 项目地址： https://gitcode.com/gh_mirrors/…

2026/10/11 19:51:46 阅读更多 →
GitHub趋势周报：从Star数到构建链路的开发者情报作战图

GitHub趋势周报：从Star数到构建链路的开发者情报作战图

1. 这份周报不是“新闻简报”，而是一份开发者情报作战图 你点开GitHub Trending页面，刷到第40周的榜单——Top 25里有3个Rust项目、2个TypeScript驱动的CLI工具、1个用Zig重写的POSIX工具链，还有个叫 llm-local-runner 的本地大模型调度器…

2026/10/11 19:50:45 阅读更多 →

日新闻

流感时间序列预测实战：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/11 14:36:53 阅读更多 →
黑夜航拍船只数据集训练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/11 14:36:54 阅读更多 →