HarmonyOS 鸿蒙Next ArkUI入门训练营—健康生活实战 健康生活APP——购食会

HarmonyOS 鸿蒙Next ArkUI入门训练营—健康生活实战 健康生活APP——购食会 一、项目概述

本项目在课程相关案例的基础上进行其它功能页面的开发，除了原先的食物营养详情页，摄入量记录页，还新增了购物页面、食谱页面、仿朋友圈页面，使APP的功能更加丰富。从营养表页面查询某些食物的营养详情，然后在超市购物页面选购需要的食材，再按照食谱页面的指示制作美食，还能在朋友圈与他人交流今天的厨艺心得，记录最近的营养摄入等等。

集购物、饮食、以厨会友于一体，因此取名为——购食会。

二、项目结构

项目结构如下图所示：

三、实际效果预览

• 营养对比页面

• 超市购物相关页面

• 食谱相关页面

• 美食交流圈页面

四、主要功能说明

1、营养对比页面

在原先营养详情页的基础上增加了一个食物营养对比页面。点击详情页右上角的按钮可以控制食物列表的显隐，点击选中其中某个食物进入营养对比页面，两个食物中哪个的营养元素含量较高则显示为橙色，方便用户比较。

• 侧边食物列表：使用课程中学习到的食物列表组件，对宽高及内外边距进行调整，放入父容器Stack，并设置Stack容器的alignContent属性为Alignment.BottomEnd，使列表与Stack容器的底部尾端对齐。

• 营养对比页面写得比较简单，中间写明主要的营养元素，再将两个食物对应的营养元素含量分别排在左右两列，并根据哪个的含量较高字体做变色处理，提高对比效率。

2、超市购物相关页面

知道了哪些东西有营养就买一些，点击“菜篮”底部页签切换到超市列表，点击进入店内逛逛。左侧的商品类别能够帮助用户更快的找到对应类别的商品，评价显示了在这家店购物过的顾客印象，商家页签则显示了该超市的地址、电话等具体信息。

• 评分条组件Rating：这个组件可以比较直观地将评分转化为星级进度条，日常使用的很多APP经常会使用到这个组件

• 超市购物页面、评论页面、详情页面仿照某外卖APP进行设计，代码较长，不方便贴出来，建议有兴趣的同学自行下载项目源码学习

3、食谱相关页面

原材料买到手了，得把这些东西加工后吃进肚子里才能摄入其中的营养。如果不知道怎么做，进入食谱页面照着其他有经验的用户分享的食谱学着做菜，点击收藏和关注持续学习厨艺。如果你本身厨艺还不错，也可以点击悬浮按钮进入食谱编辑页面，把自己拿手好菜的做法分享给大家。

• 圆形按钮的边框：设置borderWidth属性，并将borderRadius属性的值设定为宽高的一半

• 悬浮按钮的实现主要是使用position属性对x、y坐标进行设置

4、美食交流圈页面

除了在食谱页面学习厨艺，也可以在美食交流圈聊些一日三餐的趣事，找到有趣的好友一起交流厨艺心得。

• 按钮变色及文本切换：使用一个布尔型变量控制按钮背景颜色和文本的切换（在课程中学习的底部页签的图案变色也是同理，不过后者是根据页签的选中状态，对svg类型的图片的fillColor属性进行颜色填充）。

五、回顾总结

本次活动时间比较紧张，平时要忙其它事情，我只能趁着晚上和星期天的时间来写这个项目，做得比较仓促，项目所用的图片素材并不齐全，一些功能也还没有实现。不过通过这段时间的学习，我在实际的项目开发中学到了不少关于eTS开发的知识，现在基本能够使用eTS写几个简单的页面，今后也会继续精进自己的技术。这个项目是我第一次使用eTS开发，多少包含了个人的一些理解，希望能对想要学习的新手提供一点帮助。

项目仓库链接