HarmonyOS运动健康——饮食记录页面-北京尧图网络

饮食记录是运动健康App的能量管理页。用户从首页点击饮食记录或从个人中心菜单跳转到这里查看今天吃了什么、摄入了多少卡路里、还剩多少热量配额。这个页面的任务是让用户对吃了什么有量化的认知——不是感觉吃多了而是今天已经摄入1570千卡还剩630千卡。页面结构分为三部分顶部导航栏、卡路里摘要卡片、饮食记录列表。从总览到明细信息从宏观到微观。完整效果主色的变化这个页面的主色不是红色#FF4757而是橙色#FF9F43const A: string #FF9F43整个App的主色是红色但饮食页面切换到了橙色。这不是随意的——红色代表运动步数、训练橙色代表食物卡路里、饮食。颜色和语义绑定用户看到红色联想到动看到橙色联想到吃。这种颜色分工在首页就有铺垫步数环是红色卡路里环是橙色。导航栏的按钮Row() { Row() { SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1]) }.width(34).height(34).borderRadius(17).backgroundColor(rgba(0,0,0,0.03)) .justifyContent(FlexAlign.Center).onClick(() { router.back() }) Text(饮食记录).fontSize(20).fontWeight(FontWeight.Bold).fontColor(T1) .margin({ left: 10 }).layoutWeight(1) Text().fontSize(24).fontColor(A).fontWeight(FontWeight.Bold) }.width(100%).padding({ left: 16, right: 16, top: 12, bottom: 8 })导航栏右侧是一个橙色的“按钮——暗示添加新记录”。但没有绑定onClick点击不会弹出添加表单。和社区页面的发布按钮、个人中心的编辑按钮一样UI元素存在但交互未实现。卡路里摘要卡片Row() { Column() { Text(this.total.toString()).fontSize(36).fontWeight(FontWeight.Bold).fontColor(A) Text(已摄入/千卡).fontSize(11).fontColor(T3) }.alignItems(HorizontalAlign.Center).layoutWeight(1) Row() {}.width(1).height(40).backgroundColor(#F0EEF4) Column() { Text(630).fontSize(36).fontWeight(FontWeight.Bold).fontColor(#00B894) Text(剩余/千卡).fontSize(11).fontColor(T3) }.alignItems(HorizontalAlign.Center).layoutWeight(1) }.width(100%).padding(20).backgroundColor(#FFFFFF).borderRadius(16) .margin({ left: 16, right: 16, bottom: 16 })摘要卡片是一个白色圆角Row分成左右两部分左边橙色显示已摄入热量右边绿色显示剩余热量。中间用1px宽的灰色竖线分隔。这种已用/剩余的双列设计和首页的数据环异曲同工——首页用三个环展示步数/卡路里/运动时间饮食页用两列展示已摄入/剩余热量。都是让用户一眼看到我做了多少和还差多少。数字的硬编码State total: number 1570已摄入热量1570千卡是State变量但没有动态计算——不是把四条餐饮记录的cal加起来。手动算一下3804502205201570数字刚好对得上。但这是因为手动凑的不是公式算出来的。如果用户新增一条记录total不会自动更新。剩余630千卡是直接写死的字符串不是变量。15706302200——这暗示每日热量目标是2200千卡。但2200这个数字没有在代码中定义藏在硬编码的减法里。实际项目应该定义一个DAILY_TARGET 2200常量然后remaining DAILY_TARGET - total。饮食记录列表数据模型interface Meal { icon: string; name: string; cal: number; time: string }四个字段图标、名称、卡路里、时间。和社区页面的Post接口一样精简——没有餐次分类早/午/晚、没有营养成分明细蛋白质/碳水/脂肪、没有食物图片。原型阶段够用。State meals: Meal[] [ { icon: , name: 燕麦牛奶鸡蛋, cal: 380, time: 早餐 8:00 }, { icon: , name: 鸡胸肉沙拉, cal: 450, time: 午餐 12:30 }, { icon: , name: 香蕉蛋白粉, cal: 220, time: 加餐 16:00 }, { icon: , name: 牛排西兰花, cal: 520, time: 晚餐 19:00 }, ]四条记录覆盖早餐、午餐、加餐、晚餐。时间从8:00到19:00符合正常的饮食节奏。emoji图标和食物类型对应——燕麦、鸡肉、香蕉、牛排。单条记录的结构Row() { Text(m.icon).fontSize(28).width(48).height(48).borderRadius(12) .backgroundColor(#F5F5F7).textAlign(TextAlign.Center) Column() { Text(m.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor(T1) Text(m.time).fontSize(11).fontColor(T3).margin({ top: 2 }) }.alignItems(HorizontalAlign.Start).margin({ left: 12 }).layoutWeight(1) Text(m.cal 千卡).fontSize(14).fontWeight(FontWeight.Bold).fontColor(A) }.width(100%).padding(12).backgroundColor(#FFFFFF).borderRadius(14)每条记录是一个白色圆角Row左边emoji图标48×48浅灰圆角方块、中间食物名称和时间、右边卡路里数值。图标容器用borderRadius(12)——不是圆形24而是圆角方块12。和社区页面的44×44圆形头像不同饮食记录的图标是方形带圆角。这种差异是有意的头像用圆形亲和力食物图标用圆角方块规整感。卡路里数值用橙色加粗——和摘要卡片的已摄入颜色一致。用户看到橙色就联想到热量不管在摘要区还是列表区。ScrollColumnForEachScroll() { Column({ space: 10 }) { ForEach(this.meals, (m: Meal) { // 餐食卡片 }) Blank().height(20) }.width(100%).padding({ left: 16, right: 16 }) }.width(100%).layoutWeight(1)和社区页面、个人中心一样的模式Scroll包裹ColumnColumn用space控制间距ForEach渲染列表最后加Blank底部留白。这个模式在整个App中反复出现——它已经成为ArkUI列表渲染的标准写法。页面间的数据关系饮食记录和首页的卡路里环有数据关联——首页显示今天的卡路里消耗饮食页显示今天的卡路里摄入。消耗-摄入净热量差这是减肥的核心公式。但当前两个页面的数据是独立的首页的卡路里来自WEEKLY_DATA[3].calories运动消耗饮食页的total是硬编码的1570食物摄入。两者没有计算差值。实际项目中应该有一个统一的能量管理服务运动消耗从运动记录获取食物摄入从饮食记录获取净热量差消耗-摄入。首页可以展示这个差值让用户知道今天运动消耗了800千卡吃了1570千卡净摄入770千卡。踩坑记录主色的语义化选择。饮食页用橙色#FF9F43作为主色A而不是App默认的红色#FF4757。这导致A的含义在不同页面不同——在首页A是红色运动在饮食页A是橙色食物。如果以后要抽公共组件不能假设A一定是红色。更好的做法是定义语义化常量COLOR_EXERCISE和COLOR_FOOD而不是用A统一。total和meals的数据不同步。State total 1570是独立变量不从meals数组计算。如果以后加了添加/删除餐食的功能total需要手动更新。应该用getter动态计算get totalCalories(): number { return this.meals.reduce((sum, m) sum m.cal, 0) }。但ArkUI的Component不支持getter语法需要在aboutToAppear中计算或用State配合手动更新。剩余热量的硬编码。630千卡是直接写在build方法里的字符串不是变量。如果每日目标变化比如从2200改成2000需要同时改total的初始值和这里的630。两处修改容易遗漏。应该定义常量const DAILY_TARGET 2200然后remaining DAILY_TARGET - this.total。“”按钮的交互缺失。导航栏右边的“暗示添加”但没有onClick。用户点击后没有反馈。真实项目应该弹出一个添加表单——选择食物、输入卡路里、选择时间。但表单组件的实现复杂度远超当前原型。餐食卡片没有删除/编辑功能。每条记录只能看不能改。如果用户录错了比如把380千卡写成3800没有修正途径。原型阶段够用但真实产品必须有滑动删除或长按编辑。饮食记录是运动健康App中能量管理的另一半——首页展示消耗饮食页展示摄入。两者结合才能回答用户最关心的问题我今天吃多了还是吃少了从技术角度看这个页面的亮点在于颜色语义化——橙色代表食物和红色代表运动形成对比。这种颜色分工让页面在视觉上就有了运动vs饮食的区分用户不需要读文字就能理解页面主题。

HarmonyOS运动健康——饮食记录页面

相关推荐

儿童情绪识别技术：多模态融合与CNN优化实践

GPT-5.6 写代码太烧钱？Agent 场景 3 个能立刻落地的降本点

存储金字塔性能量化：从寄存器到硬盘，速度与容量相差10^9倍的秘密

更多资讯

Linux下用VSCode搭建C++开发环境：从安装到调试完整指南

五大头部定位咨询机构硬实力PK：从评分到案例，顾均辉拿下9.2评分

3 步把 Transformer 目标检测接进 YOLOv9：实时检测精度优化实操指南

Unity3D RPG游戏开发：从角色控制到数据驱动战斗系统全解析

YOLOv11多任务改造：检测分割计数一体的工程实践

Roc 编译器 match 列表模式快照测试深度解析：混合字面量与变量的模式匹配

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？