企业官网建设流程全解析

喝水提醒计划：鸿蒙AI应用开发实战——AI健康管家，水润每一天

一、引言

水是生命之源，但大多数人每天喝水量并不达标。"每天应该喝多少水？"这个看似简单的问题，答案却因人而异——体重、活动量、气温等因素都会影响每日所需水量。盲目追求"8杯水"的标准，可能并不适合每个人。

喝水提醒计划正是为了解决这一需求而诞生的鸿蒙AI应用。用户只需输入体重和选择活动量（低/中/高），AI即可根据科学公式计算出每日饮水目标，并自动生成7时段的详细饮水计划表，让科学饮水变得简单可执行。

本文将从应用架构设计、鸿蒙核心技术实现、AI应用亮点等维度，深度剖析这款应用的开发全流程。

二、应用架构设计：Model-Service-Page 三层架构

2.1 架构概览

┌─────────────────────────────────────────────────────────┐ │ Page 层 (UI) │ │ WaterReminderPage.ets │ │ @State 体重计算 / @Builder 饮水时间线 / 数据格式化 │ ├─────────────────────────────────────────────────────────┤ │ Service 层 (业务逻辑) │ │ WaterReminderService.ets │ │ 科学饮水计算 / 活动量系数 / 时段分配算法 │ ├─────────────────────────────────────────────────────────┤ │ Model 层 (数据模型) │ │ WaterReminderModel.ets │ │ WaterEntry / WaterData / WRMessage / 常量 │ └─────────────────────────────────────────────────────────┘

2.2 Model 层：数据结构定义

核心数据类：

• WaterEntry：单个饮水时段，包含时间点和饮水量（ml）
• WaterData：完整饮水计划，包含每日目标和分时段列表

关键常量：

• WR_ACTIVITIES：3种活动量（低/中/高）

2.3 Service 层：科学饮水计算

Service 层实现了基于体重和活动量的科学饮水计算：

getWaterPlan(weight:number,activity:string):WaterData{letmlPerKg=30if(activity==='中'){mlPerKg=35}elseif(activity==='高'){mlPerKg=40}constgoalMl=Math.round(weight*mlPerKg)// 按7时段分配consttimes=['08:00','10:00','12:00','14:00','16:00','18:00','20:00']constportions=[0.15,0.15,0.15,0.15,0.15,0.15,0.10]// 计算每个时段的饮水量}

2.4 Page 层：UI展示

Page 层实现了体重输入、活动量选择等交互，以及饮水目标展示和分时段饮水时间表。

三、鸿蒙技术深度解析

3.1 @State 体重计算

本应用的核心是一个数学计算——根据体重和活动量计算出每日饮水量：

@StateselectedWeight:string='60'// 体重输入@StateselectedActivity:string=''// 活动量选择@StatecurrentData:WaterData|null=null// 饮水计划结果

体重输入使用 TextInput 组件，并限制为数字输入类型：

TextInput({text:this.selectedWeight,placeholder:'请输入体重（kg）'}).type(InputType.Number)// 限制数字输入.onChange((val:string)=>{this.selectedWeight=val})

计算触发：当体重和活动量都输入后，生成按钮出现：

if(this.selectedWeight!==''&&this.selectedActivity!==''){Text('生成饮水计划')// ....onClick(()=>{this.onGenerate()})}

数值安全处理：在生成时进行数值校验，防止非法输入：

constweight=parseInt(this.selectedWeight)constdata=this.service.getWaterPlan(isNaN(weight)?60:weight,this.selectedActivity)

3.2 @Builder 饮水时间线

饮水计划结果通过 @Builder 构建为直观的时间线展示：

@BuilderbuildResultCard(data:WaterData){Column(){// 目标展示Column(){Text('🎯 每日饮水目标')Text('${data.goal_ml}ml').fontSize(36).fontWeight(FontWeight.Bold).fontColor(COLOR_PRIMARY)Text('约 ${Math.round(data.goal_ml / 250)} 杯（250ml/杯）')}// 分时段计划Text('⏰ 分时段饮水计划')ForEach(data.schedule,(entry:WaterEntry,idx:number)=>{Row(){Text(entry.time)// 时间点Text('${entry.ml}ml')// 饮水量Text('█'.repeat(Math.max(1,Math.round(entry.ml/100))))// 进度条}})}}

时间线设计的亮点：

• 目标饮水量以大号字体（36号）突出显示，视觉冲击力强
• 自动换算杯数（250ml/杯），让用户更直观理解
• 每个时段使用文本进度条（█字符）直观展示饮水量比例
• 交替背景色（奇偶行不同），提高可读性

3.3 数据格式化显示

目标饮水量和时段饮水量的显示采用了格式化处理：

// 目标展示Text('${data.goal_ml}ml').fontSize(36).fontWeight(FontWeight.Bold)// 杯数换算Text('约 ${Math.round(data.goal_ml / 250)} 杯（250ml/杯）')// 进度条可视化Text('█'.repeat(Math.max(1,Math.round(entry.ml/100))))

数据格式化的设计：

• 大号数字突出核心信息
• 附加热量换算提供辅助参考
• 文本进度条提供可视化对比

3.4 Scroll 滚动展示

饮水计划结果包含7个时段，使用 Scroll 确保所有内容可滚动查看：

if(this.currentData!==null){Scroll(){Column(){this.buildResultCard(this.currentData)}.padding({bottom:20})}.layoutWeight(1).scrollBar(BarState.Off)}

四、AI 应用亮点分析

4.1 体重×30-35ml科学计算

应用采用国际通用的饮水计算公式：

每日饮水量 = 体重(kg) × 每公斤体重需水量(ml)

基准值：每公斤体重30ml

• 低活动量：30ml/kg
• 中活动量：35ml/kg
• 高活动量：40ml/kg

计算示例：

• 60kg + 低活动量：60 × 30 = 1800ml
• 60kg + 中活动量：60 × 35 = 2100ml
• 60kg + 高活动量：60 × 40 = 2400ml

4.2 活动量系数上浮

活动量系数的设计体现了科学个性化的考量：

letmlPerKg=30if(activity==='中'){mlPerKg=35// 上浮16.7%}elseif(activity==='高'){mlPerKg=40// 上浮33.3%}

活动量说明：

• 低活动量（久坐办公、少运动）：30ml/kg
• 中活动量（偶尔运动、站立工作）：35ml/kg
• 高活动量（经常运动、体力劳动）：40ml/kg

4.3 7时段自动分配

系统将每日总饮水量按比例分配到7个时段，形成科学的饮水计划：

consttimes=['08:00','10:00','12:00','14:00','16:00','18:00','20:00']constportions=[0.15,0.15,0.15,0.15,0.15,0.15,0.10]

分配逻辑：

• 早8点到晚6点，每2小时饮水一次，每次占总量的15%
• 晚8点最后一次饮水，占总量的10%（睡前减少饮水，避免夜起）
• 7个时段均匀分布，覆盖全天主要活动时间

五、关键技术挑战与解决方案

5.1 挑战一：数值输入的安全校验

挑战：用户可能输入非数字或负值，需要安全处理。

解决方案：

• TextInput 设置type(InputType.Number)限制数字输入
• 解析时使用isNaN校验，非法值时使用默认值60
• 体重为0或负数时自动重置为60

5.2 挑战二：饮水量的直观展示

挑战：单纯的数字不够直观，用户需要视觉化的对比。

解决方案：

• 大号数字展示目标量
• 自动换算为杯数（250ml/杯）
• 使用文本进度条（█字符）展示每个时段的相对水量
• 交替背景色增强可读性

5.3 挑战三：时段分配的科学性

挑战：饮水时段需要科学合理，避免睡前大量饮水。

解决方案：

• 最后时段（20:00）分配比例最低（10%）
• 白天时段均匀分配（15%）
• 每个时段间隔2小时，便于记忆和执行

六、用户交互体验设计

6.1 青色的健康主题

应用采用青色系配色（#ECFEFF背景、#06B6D4主题色），传递清新、健康的品牌调性：

constCOLOR_BG='#ECFEFF'constCOLOR_PRIMARY='#06B6D4'constCOLOR_SELECTED_BG='#CFFAFE'

6.2 简洁的输入流程

• 体重输入：数字键盘自动弹出，输入便捷
• 活动量选择：三种活动量标签，一键选择

6.3 直观的结果展示

• 目标量以超大数字展示，一目了然
• 时段列表以时间线样式呈现
• 进度条直观对比各时段水量

七、总结

喝水提醒计划应用展示了鸿蒙 ArkTS 在健康领域的应用潜力，三个核心技术亮点值得关注：

1. 科学饮水计算：基于体重×30-35ml/kf的权威公式，结合活动量系数
2. @Builder 饮水时间线：将饮水计划渲染为直观的时间线视图
3. 数据格式化展示：大号数字、杯数换算、文本进度条等多维展示

未来展望：未来可以添加饮水提醒通知（定时推送）、饮水记录追踪、历史数据分析、天气温度自适应调整等功能，打造更智能的饮水健康助手。