HarmonyOS应用开发实战：萌宠日记 - 健康记录分类导航设计

HarmonyOS应用开发实战萌宠日记 - 健康记录分类导航设计前言健康记录是萌宠日记的核心功能模块之一用于记录宠物的体重、疫苗、驱虫、体检等健康数据。在HealthRecordPage中我们使用分类导航设计通过5 个图标分类⚖️体重、疫苗、️驱虫、体检、其他让用户快速切换不同健康类别的数据视图。本文将从萌宠日记的健康记录分类导航实现出发深入解析分类图标设计、选中态管理、数据隔离以及分类导航的交互模式。一、分类导航整体设计1.1 数据结构// HealthRecordPage.ets — 健康分类数据结构 interface HealthCategory { icon: string // 分类图标 Emoji label: string // 分类标签 color: string // 图标背景色 } private categories: HealthCategory[] [ { icon: ⚖️, label: 体重, color: #FFF3E0 }, { icon: , label: 疫苗, color: #E3F2FD }, { icon: ️, label: 驱虫, color: #E8F5E9 }, { icon: , label: 体检, color: #FCE4EC }, { icon: , label: 其他, color: #F3E5F5 } ]1.2 完整渲染// HealthRecordPage.ets — 分类导航栏 Row({ space: 8 }) { ForEach(this.categories, (category: HealthCategory, index: number) { Column({ space: 4 }) { // 图标容器 Column() { Text(category.icon) .fontSize(22) } .width(44) .height(44) .backgroundColor(category.color) .borderRadius(12) .justifyContent(FlexAlign.Center) // 标签文字 Text(category.label) .fontSize(11) .fontColor(this.selectedCategory index ? #F5A623 : #666666) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) .onClick(() { this.selectedCategory index // 切换分类 }) }) } .width(100%) .padding({ left: 16, right: 16, top: 12, bottom: 12 })提示分类导航使用layoutWeight(1)实现等宽分布5 个分类均匀占据 Row 宽度。每个分类包含图标容器44×44vp 圆角矩形和标签文字选中时标签文字变为品牌橙色#F5A623。二、分类图标设计2.1 图标配色方案分类图标背景色色值寓意体重⚖️浅橙#FFF3E0温暖、记录疫苗浅蓝#E3F2FD医疗、冷静驱虫️浅绿#E8F5E9健康、安全体检浅粉#FCE4EC关爱、温柔其他浅紫#F3E5F5多样、综合2.2 图标容器参数参数值说明容器尺寸44×44vp适中大小易于点击圆角12vp圆角矩形图标大小22fpEmoji 图标选中色#F5A623品牌橙色未选中色#666666灰色三、选中态管理3.1 State 控制State selectedCategory: number 0 // 默认选中体重第一个3.2 选中态样式// 选中品牌橙色 // 未选中灰色 Text(category.label) .fontColor(this.selectedCategory index ? #F5A623 : #666666)3.3 切换事件.onClick(() { this.selectedCategory index // 更新选中状态 // State 变化 → UI 自动重渲染 // 同时切换下方显示的数据内容 })四、分类数据隔离4.1 数据展示// 根据选中的分类显示不同的数据 build() { Column() { // 分类导航栏 this.CategoryNav() Scroll() { Column({ space: 16 }) { if (this.selectedCategory 0) { // 体重 — 显示体重图表和记录 this.WeightChart() this.WeightRecordList() } else if (this.selectedCategory 1) { // 疫苗 — 显示疫苗记录 this.VaccineRecordList() } else if (this.selectedCategory 2) { // 驱虫 — 显示驱虫记录 this.DewormingRecordList() } else if (this.selectedCategory 3) { // 体检 — 显示体检记录 this.CheckupRecordList() } else { // 其他 — 显示其他记录 this.OtherRecordList() } } } .layoutWeight(1) } }4.2 数据模型// 各分类的数据模型 interface WeightRecord { date: string weight: string status: string statusColor: string } interface VaccineRecord { date: string name: string doctor: string nextDate: string } interface DewormingRecord { date: string type: string product: string nextDate: string } interface CheckupRecord { date: string hospital: string result: string statusColor: string }五、分类导航的布局5.1 布局结构┌─────────────────────────────────────┐ │ ⚖️ │ │ 体重 疫苗 驱虫 体检 其他 │ │ 橙色 灰色 灰色 灰色 灰色 │ │ 选中 │ ├─────────────────────────────────────┤ │ │ │ 体重变化图表 │ │ ┌───────────────────────────────┐ │ │ │ 折线图 / 柱状图 │ │ │ └───────────────────────────────┘ │ │ │ │ 记录列表 │ │ ┌───────────────────────────────┐ │ │ │ 2024-05-05 4.5 kg 正常 │ │ │ │ 2024-04-20 4.3 kg 正常 │ │ │ │ 2024-03-15 4.1 kg 正常 │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘六、ForEach 与 layoutWeight 等分6.1 等分机制Row({ space: 8 }) { ForEach(this.categories, (category, index) { Column() { // 图标 标签 } .layoutWeight(1) // 等分宽度 }) }6.2 宽度计算父容器宽度 360vp减去左右 padding 32vp 328vp 间距总和 8vp × 44 个间隔 32vp 剩余宽度 328 - 32 296vp 每列宽度 296 / 5 59.2vp七、分类导航的交互反馈7.1 点击反馈Column({ space: 4 }) { // 图标 // 标签 } .layoutWeight(1) .alignItems(HorizontalAlign.Center) .onClick(() { this.selectedCategory index }) .clickEffect({ level: ClickEffectLevel.LIGHT })八、无障碍适配Column({ space: 4 }) { // 图标 // 标签 } .accessibilityText(${category.label}分类${this.selectedCategory index ? 已选中 : 点击切换})九、最佳实践9.1 分类导航设计原则有序列表 — 分类导航设计的 5 个原则数量适中3-5 个分类为最佳选择成本低图标 标签图标直观表达分类含义标签消除歧义配色区分每个分类使用不同的背景色便于视觉区分选中高亮选中分类使用品牌色高亮一目了然数据隔离切换分类时下方内容区域同步切换9.2 萌宠日记分类导航总结设计要素值说明分类数量5 个体重、疫苗、驱虫、体检、其他图标尺寸44×44vp圆角 12vp标签字号11fp小号辅助文字选中色#F5A623品牌橙色未选中色#666666灰色布局方式layoutWeight(1)等宽分布总结本文从萌宠日记的健康记录分类导航实现出发深入解析了分类导航的完整设计数据结构HealthCategory 接口定义分类数据图标设计5 个分类使用不同配色视觉区分明确选中态管理State selectedCategory 控制选中状态数据隔离切换分类时显示不同的数据内容布局等分layoutWeight(1) 实现等宽分布交互反馈点击切换分类选中态高亮无障碍适配accessibilityText 描述分类状态下一篇我们将深入体重折线图 — 用 Stack 绘制自定义图表解析健康记录页中体重图表的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowlayoutWeight 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraintsForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state点击效果https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-click-effect颜色使用规范https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit交互反馈https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback