喝水提醒计划：鸿蒙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 {
    let mlPerKg = 30
    if (activity === '中') {
        mlPerKg = 35
    } else if (activity === '高') {
        mlPerKg = 40
    }
    const goalMl = Math.round(weight * mlPerKg)
    // 按7时段分配
    const times = ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
    const portions = [0.15, 0.15, 0.15, 0.15, 0.15, 0.15, 0.10]
    // 计算每个时段的饮水量
}

2.4 Page 层：UI展示

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

---

三、鸿蒙技术深度解析

3.1 @State 体重计算

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

@State selectedWeight: string = '60'        // 体重输入
@State selectedActivity: string = ''         // 活动量选择
@State currentData: 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() })
}

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

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

3.2 @Builder 饮水时间线

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

@Builder
buildResultCard(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 活动量系数上浮

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

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

活动量说明：

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

4.3 7时段自动分配

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

const times = ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
const portions = [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主题色），传递清新、健康的品牌调性：

const COLOR_BG = '#ECFEFF'
const COLOR_PRIMARY = '#06B6D4'
const COLOR_SELECTED_BG = '#CFFAFE'

6.2 简洁的输入流程

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

6.3 直观的结果展示

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

---

七、总结

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

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

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