喝水是健康生活的重要组成部分，很多人忙起来就忘了喝水。我们的健康管理App提供了一个饮水追踪功能，用户可以记录每天喝了多少杯水，卡片会显示进度和总量。饮水卡片的交互比较有意思：用户可以点击杯子图标来记录喝水，也可以用加减按钮快速调整。这篇文章我们来实现这个功能。每日目标定义为静态常量，方便后续修改。如果将来要支持用户自定义目标，可以把这个值改成从Provider获取。这样的设计让代码更灵活，不用到

卡路里卡片是首页最重要的组件，它展示了用户今日的卡路里预算、已摄入、已消耗和剩余量。右侧还有一个漂亮的环形进度条和一个正在吃东西的小人插画。这个卡片涉及到的知识点比较多：Provider数据绑定、自定义绘制、Canvas绘制、深色模式适配等。我们一步步来实现。

上一篇我们实现了卡路里卡片，用环形进度条展示了今日的卡路里摄入情况。这篇文章我们来实现营养素卡片，它用饼图的形式展示碳水化合物、蛋白质、脂肪三大宏量营养素的摄入比例。营养素卡片和卡路里卡片有些相似，都用到了来绘制图表。不过饼图的绘制逻辑和环形进度条有所不同，我们会详细讲解。用一个列表存储每个扇区的数据，包括百分比和颜色。这里用了Dart 3的Record语法，比创建一个专门的类更简洁。三个扇区的颜

做过App的朋友都知道，启动页是用户打开应用后看到的第一个画面。虽然它停留的时间很短，但承担的任务却不少——展示品牌、预加载数据、判断用户状态然后跳转到对应页面。我们这个健康管理App的启动页，除了基本功能外，还加了一些有意思的东西：用Canvas画了一整套健康饮食主题的背景插画，包括一个正在吃饭的人物、各种食材和餐具。这样做的好处是不用引入图片资源，包体积小，而且矢量图形在任何分辨率下都清晰。废

首页是用户打开App后最常看到的页面，它需要在有限的空间里展示尽可能多的有用信息。我们这个健康管理App的首页包含了搜索栏、卡路里卡片、身体数据卡片、营养素卡片、步数卡片、饮水卡片等多个组件。今天我们先来搭建首页的整体布局框架，具体的卡片组件会在后续文章中详细讲解。

说实话，底部导航栏这东西看起来简单，但要做好还真得花点心思。你打开手机上的微信、支付宝、抖音，底部都有一排图标，点哪个就切换到哪个页面。这种交互模式用户早就习惯了，所以我们的健康管理App也采用这种设计。不过我们加了点小心思——中间放了个悬浮的加号按钮。为啥这么设计？因为健康管理App最核心的操作就是"记录"，记录吃了什么、喝了多少水、做了什么运动。把这个高频操作放在最显眼的位置，用户一眼就能看到

上一篇我们搞定了体重输入，这篇继续把身高、性别、生日三个步骤做完。这三个数据加上体重，就能算出用户的BMR（基础代谢率）和BMI（身体质量指数）了。BMR决定了用户躺着不动一天要消耗多少卡路里，BMI判断用户是偏瘦、正常还是偏胖。身高用标尺（和体重类似）性别用大卡片点选生日用滚轮选择器为啥不统一用一种方式？因为数据特点不同，交互方式也该不同。身高是连续数值，用标尺合适；性别就两个选项，用卡片更直观

用户选完目标之后，下一步就是输入个人信息了。第一个要填的是体重——这玩意儿是计算BMR（基础代谢率）的关键数据，填错了后面所有计算都跟着错。但是，让用户手动输入数字体验太差了。你想啊，用户得点输入框、弹出键盘、输入数字、可能还要删掉重输……麻烦。所以我们做了一个可滑动的标尺，用户左右滑动选择数值，直观又有趣。更重要的是，这个标尺支持三种单位切换：公斤(kg)、磅(lb)、英石(st)。切换单位的时

用户填完所有个人信息后，终于到了最后一步：选择减重/增重计划。不同的计划对应不同的"激进程度"——每周减1磅还是2磅？卡路里预算是1600还是1400？选得太激进容易坚持不下去，选得太保守又见效慢。选完计划后，我们用一个漂亮的动画圆环展示每日卡路里预算，给用户一个"仪式感"，让他觉得"好，从今天开始我要认真执行了"。这篇文章就来实现这两个页面。?支持卡路里和千焦两种单位切换。1卡路里 = 4.18

个人信息设置的最后两步，我们要搞定目标体重和运动强度。这两个数据看起来简单，但其实很关键。目标体重决定了用户是减重还是增重，以及要减/增多少。运动强度影响每日卡路里消耗的计算——同样的基础代谢，天天躺着和天天健身，消耗差得远了。这两个数据填完，我们就能给用户算出每日卡路里预算了。});@overridevalue：目标体重值（公斤）：当前体重（用于后续对比显示）onChanged：数值变化时的回调