HarmonyOS应用开发实战：萌宠日记 - 数据可视化组件化封装

发布时间：2026/10/13 10:21:40

HarmonyOS应用开发实战：萌宠日记 - 数据可视化组件化封装
HarmonyOS应用开发实战萌宠日记 - 数据可视化组件化封装前言数据可视化组件化封装是将统计页面中的图表柱状图、饼图、折线图封装为可复用组件的设计模式。在萌宠日记中通过将图表组件化可以在多个页面中复用同一图表组件保持视觉一致性同时降低代码重复。本文将从萌宠日记中数据可视化组件的封装实现出发深入解析组件接口设计、图表组件封装、以及在不同页面中的复用。一、柱状图组件封装Component export struct BarChart { Prop data: number[] [] Prop barColor: string #F5A623 Prop barWidth: number 16 Prop chartHeight: number 64 build() { Row({ space: 4 }) { ForEach(this.data, (value: number) { Column() .width(this.barWidth) .height(value * (this.chartHeight / Math.max(...this.data))) .backgroundColor(this.barColor) .borderRadius(4) }) } .alignItems(VerticalAlign.Bottom) .height(this.chartHeight) } }二、组件使用// 统计页中使用 BarChart({ data: [3, 5, 4, 7, 6, 8, 5], barColor: #F5A623, barWidth: 16, chartHeight: 64 })三、组件接口参数类型默认值说明datanumber[][]图表数据barColorstring#F5A623柱状图颜色barWidthnumber16柱子宽度chartHeightnumber64图表高度四、复用场景页面图表类型数据统计页柱状图日记数量健康记录折线图体重变化提醒页柱状图提醒统计五、总结本文从萌宠日记的数据可视化组件化封装实现出发深入解析了图表组件的完整方案组件封装Component 定义图表组件参数化配置data、color、width、height跨页面复用统计页、健康记录、提醒页如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Component 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-componentsProp 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-prop7.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 组件的核心属性和使用场景布局技巧掌握常见的布局模式及其适用范围交互实现学习点击事件、状态管理等交互设计方案最佳实践了解实际项目中的工程化实践和性能考量在实际开发中建议根据具体业务需求灵活调整组件参数和布局结构以达到最佳的用户体验效果。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ArkTS 开发指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-get-startedHarmonyOS 应用开发导读https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guideUI 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-summaryArkTS API 参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-api资源分类与访问https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-access应用开发快速入门https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/start-with-ets-stageArkWeb 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web动画开发指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animation6.1 完整示例代码以下是一个完整的实际应用示例展示了相关组件的综合使用// 完整的组件使用示例 Component export struct DemoComponent { State message: string Hello HarmonyOS State count: number 0 build() { 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 状态管理代码// 状态管理示例 State isActive: boolean false Prop title: string Link sharedValue: number build() { Column() { Text(this.title) .fontSize(18) .fontColor(this.isActive ? #F5A623 : #999999) Button(this.isActive ? 取消 : 激活) .onClick(() { this.isActive !this.isActive }) } }6.3 数据绑定与渲染// ForEach 循环渲染示例 interface DataItem { id: number name: string icon: string } State dataList: 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 样式与主题配置// 样式配置示例 const ThemeStyles { primaryColor: #F5A623, backgroundColor: #FFF8F0, cardBackground: #FFFFFF, textPrimary: #333333, textSecondary: #999999, borderRadius: 12, spacing: 16 } Styles function CardStyle() { .backgroundColor(ThemeStyles.cardBackground) .borderRadius(ThemeStyles.borderRadius) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) }

相关新闻

软件安装全攻略：从环境检查到自动化部署

软件安装全攻略：从环境检查到自动化部署

1. 软件安装的终极指南：从入门到精通作为一名从业十年的技术博主，我见过太多人因为软件安装问题浪费数小时甚至数天时间。今天我要分享的这套方法论，已经帮助超过200位学员彻底解决了软件安装的困扰。不同于网上零散的教程，这是一…

2026/10/13 0:02:08 阅读更多 →
CSRF（跨站请求伪造）攻击实战攻略

CSRF（跨站请求伪造）攻击实战攻略

CSRF（跨站请求伪造）攻击实战攻略 一、什么是 CSRF 攻击？ CSRF（Cross-Site Request Forgery，跨站请求伪造） 是一种利用用户已登录身份，在用户不知情的情况下，伪造请求执行恶意操作的攻…

2026/10/12 18:08:46 阅读更多 →
北京航空航天大学/中北大学eChem：30秒1350 °C脉冲热冲击，把硼深度嵌入石墨烯用于超长寿命锂存储

北京航空航天大学/中北大学eChem：30秒1350 °C脉冲热冲击，把硼深度嵌入石墨烯用于超长寿命锂存储

1. 背景异质原子掺杂是调控石墨烯电子结构、层间距和电化学活性的重要手段，其中硼取代能够削弱碳骨架表面负电性、提高功函数，并为 Li 迁移提供更有利的电子环境。然而，传统原位合成或后处理方法往往耗时较长、溶剂消耗大，且掺杂多…

2026/10/5 8:47:28 阅读更多 →

最新新闻

K8s 探针配置的 3 个反直觉行为：为什么 Pod 一直没就绪

K8s 探针配置的 3 个反直觉行为：为什么 Pod 一直没就绪

我不会起名字322 后端 / 算法 / 数据库 📘 技术栈 ｜ 🧩 力扣 Hot100 ｜ 🐹 Go 项目 ｜ 🟥 Redis ｜ 🐬 MySQL 文章目录K8s 探针配置的 3 个反直觉行为：为什么 P…

2026/10/13 10:20:50 阅读更多 →
Linux 6.12 源码深度剖析: shrink_node

Linux 6.12 源码深度剖析: shrink_node

Linux 6.12 内核深度解析：内存回收核心引擎 shrink_node 1. 📌 技术点速览 在 Linux 内存管理系统中，当物理内存紧张、达到或低于特定的水位线（Watermark）时，内核必须启动页面回收（Page Reclaim）机制以释放物理内存。shrink_node 函数是整个内存回收子系统的核心控制…

2026/10/13 10:20:50 阅读更多 →
闲鱼自动回复不生效怎么办？叮当小宝CS排查三步

闲鱼自动回复不生效怎么办？叮当小宝CS排查三步

闲鱼的自动回复是卖家最常用也最常出状况的功能：明明设了话术，买家发来消息却没有回。这篇按三步排查把常见原因过一遍，再说说闲鱼自带工具的边界，以及单量上来之后怎么补位。## 先查：设置是否真的保存生效路径再走一遍…

2026/10/13 10:20:50 阅读更多 →
十六进制转十进制C语言代码实现

十六进制转十进制C语言代码实现

本文章主要讲解: 将输入的十六进制数转化为十进制数的C语言代码实现过程知识较为基础&#xff0c;若有不足请各位多多指教首先给出完整实现代码&#xff1a; #include<stdio.h> #include<stdlib.h> #include<string.h> #include<math.h> #define weish…

2026/10/13 10:20:50 阅读更多 →
Godot VisibleOnScreenNotifier2D 实战指南：基于渲染剔除的 2D 屏幕可见性检测

Godot VisibleOnScreenNotifier2D 实战指南：基于渲染剔除的 2D 屏幕可见性检测

文档教程游戏开发 【免费下载链接】godot-docs Godot Engine official documentation 项目地址&#xff1a; https://gitcode.com/GitHub_Trending/go/godot-docs 点击查看 免费下载 VisibleOnScreenNotifier2D 是 Godot Engine 官方文档&#xff08;本仓库 godot-docs&#x…

2026/10/13 10:20:50 阅读更多 →
HANA数据库HA高可用双机架构原理

HANA数据库HA高可用双机架构原理

HA双机架构的核心概念与设计思路拆解1. 主流HA模式&#xff1a;共享存储 vs. 存储复制HANA HA主要有两种实现模式&#xff0c;选择哪一种&#xff0c;取决于你的基础设施策略和成本考量。共享存储架构&#xff08;Shared Storage&#xff09; &#xff1a;这是较为传统和经典的…

2026/10/13 10:19:49 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目&#xff0c;我最大的感受是&#xff0c;大部分坑不是出在技术前沿&#xff0c;而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节&#xff0c;最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了&#xff0c;很难不碰到舵机控制这道坎。做智能小车要转方向&#xff0c;做机械臂要抬关节&#xff0c;做云台要偏航俯仰&#xff0c;背后都是同一个东西在干活&#xff1a;舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”&#xff1f;——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台&#xff1f;或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜&#xff1f;又或者&#xff0c;在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

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

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

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

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

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

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

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

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

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

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 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/12 21:05:09 阅读更多 →
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/12 14:48:49 阅读更多 →
黑夜航拍船只数据集训练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/12 18:11:17 阅读更多 →