智能喝水提醒助手应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• shared_preferences: https://pub.dev/packages/shared_preferences
• flutter_local_notifications: https://pub.dev/packages/flutter_local_notifications
• connectivity_plus: https://pub.dev/packages/connectivity_plus

一、项目概述

运行效果图

1.1 应用简介

智能喝水提醒助手是一款贴心的健康管理应用，根据用户体重、活动量和天气情况，智能计算每日饮水量目标，定时提醒用户喝水，记录饮水历史数据。应用以清新的蓝色为主色调，象征生命之源——水。涵盖主页、记录、统计、设置四大模块，帮助用户养成健康的饮水习惯，保持身体水分充足。

应用采用科学的水量计算公式，结合个人体质和外部环境因素，为每位用户量身定制饮水计划。通过直观的进度展示、智能的提醒机制、详尽的统计分析，让用户轻松管理每日饮水，远离脱水困扰。

1.2 核心功能

功能模块	功能描述	实现方式
智能目标计算	根据体重、活动量、天气计算每日饮水目标	公式算法
快速记录	一键记录饮水量，支持多种杯子规格	预设模板
自定义记录	自由输入饮水量，灵活记录	滑块选择
定时提醒	按设定间隔提醒用户喝水	Timer定时器
饮水历史	按时间轴展示饮水记录	列表展示
统计分析	周饮水趋势、时段分布等数据可视化	图表绘制
个性化设置	体重、活动量、天气、作息时间设置	参数配置
目标追踪	实时显示饮水进度和完成度	进度环

1.3 活动量等级定义

序号	等级名称	Emoji	乘数	描述
1	低活动量	🛋️	0.8	久坐办公，很少运动
2	中等活动	🚶	1.0	日常活动，偶尔运动
3	高活动量	🏃	1.2	经常运动，体力劳动
4	运动员	🏋️	1.5	高强度训练，大量出汗

1.4 天气类型定义

序号	天气名称	Emoji	乘数	描述
1	正常天气	🌤️	1.0	温度适宜，湿度正常
2	炎热天气	☀️	1.2	高温天气，出汗较多
3	寒冷天气	❄️	0.9	低温天气，代谢降低
4	干燥天气	🏜️	1.1	空气干燥，需多补水

1.5 杯子规格定义

序号	杯子名称	Emoji	容量	适用场景
1	小杯	🥤	150ml	少量饮水、儿童使用
2	中杯	🥛	250ml	日常饮水、办公室
3	大杯	☕	350ml	运动后、大量补水
4	水瓶	🍶	500ml	户外活动、长途出行

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	StatefulWidget	-
数据存储	SharedPreferences	>= 2.0.0
通知提醒	flutter_local_notifications	>= 17.0.0
目标平台	鸿蒙OS / Web / Android / iOS	API 21+

1.7 项目结构

lib/
└── main_water_reminder.dart
    ├── WaterReminderApp              # 应用入口
    ├── ActivityLevel                 # 活动量枚举
    ├── WeatherType                   # 天气类型枚举
    ├── CupSize                       # 杯子规格枚举
    ├── WaterRecord                   # 饮水记录模型
    ├── UserSettings                  # 用户设置模型
    ├── WaterReminderHomePage         # 主页面（底部导航）
    ├── _buildHomePage                # 主页
    ├── _buildRecordsPage             # 记录页
    ├── _buildStatisticsPage          # 统计页
    ├── _buildSettingsPage            # 设置页
    ├── WaterProgressPainter          # 水量进度绘制器
    └── WeeklyChartPainter            # 周图表绘制器

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 饮水记录流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 活动量枚举 (ActivityLevel)

enum ActivityLevel {
  low(label: '低活动量', emoji: '🛋️', multiplier: 0.8, description: '久坐办公，很少运动'),
  moderate(label: '中等活动', emoji: '🚶', multiplier: 1.0, description: '日常活动，偶尔运动'),
  high(label: '高活动量', emoji: '🏃', multiplier: 1.2, description: '经常运动，体力劳动'),
  athlete(label: '运动员', emoji: '🏋️', multiplier: 1.5, description: '高强度训练，大量出汗');

  final String label;
  final String emoji;
  final double multiplier;
  final String description;
  const ActivityLevel({
    required this.label,
    required this.emoji,
    required this.multiplier,
    required this.description,
  });
}

3.1.2 天气类型枚举 (WeatherType)

enum WeatherType {
  normal(label: '正常天气', emoji: '🌤️', multiplier: 1.0),
  hot(label: '炎热天气', emoji: '☀️', multiplier: 1.2),
  cold(label: '寒冷天气', emoji: '❄️', multiplier: 0.9),
  dry(label: '干燥天气', emoji: '🏜️', multiplier: 1.1);

  final String label;
  final String emoji;
  final double multiplier;
  const WeatherType({
    required this.label,
    required this.emoji,
    required this.multiplier,
  });
}

3.1.3 用户设置模型 (UserSettings)

class UserSettings {
  final double weight;
  final ActivityLevel activityLevel;
  final WeatherType weatherType;
  final int wakeUpHour;
  final int sleepHour;
  final int reminderInterval;

  const UserSettings({
    this.weight = 65.0,
    this.activityLevel = ActivityLevel.moderate,
    this.weatherType = WeatherType.normal,
    this.wakeUpHour = 7,
    this.sleepHour = 23,
    this.reminderInterval = 60,
  });

  int calculateDailyTarget() {
    final baseWater = weight * 30;
    final activityAdjusted = baseWater * activityLevel.multiplier;
    final weatherAdjusted = activityAdjusted * weatherType.multiplier;
    return weatherAdjusted.round();
  }
}

3.1.4 饮水记录模型 (WaterRecord)

class WaterRecord {
  final String id;
  final int amount;
  final DateTime time;
  final CupSize cupSize;

  const WaterRecord({
    required this.id,
    required this.amount,
    required this.time,
    required this.cupSize,
  });
}

3.1.5 活动量分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 主页结构

3.2.3 记录页结构

3.2.4 统计页结构

3.3 水量计算逻辑

3.4 提醒机制逻辑

---

四、UI设计规范

4.1 配色方案

应用以清新的蓝色为主色调，象征生命之源——水：

颜色类型	色值	用途
主色	#2196F3 (Blue)	导航、主题元素、进度环
主色容器	#E3F2FD	卡片背景、进度环背景
辅助色	#1976D2	强调元素
第三色	#64B5F6	次要元素
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片
成功色	#4CAF50	目标达成
警告色	#FF9800	剩余水量
统计色	#9C27B0	统计数据

4.2 活动量配色

活动量	色值	视觉效果
低活动量	#90CAF9	浅蓝色
中等活动	#42A5F5	中蓝色
高活动量	#1E88E5	深蓝色
运动员	#1565C0	深蓝偏紫

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
进度百分比	48px	Bold	主色
水量数值	16px	Bold	主色
卡片标题	16px	Medium	#000000
提示文字	14px	Regular	#666666
小标签	12px	Regular	#999999

4.4 组件规范

4.4.1 进度环组件

┌─────────────────────────────────────┐
│                                     │
│           ╭───────────╮            │
│          ╱             ╲           │
│         │               │          │
│         │     75%      │          │
│         │   1500/2000   │          │
│         │     ml       │          │
│          ╲             ╱           │
│           ╰───────────╯            │
│                                     │
│        今日饮水目标                  │
└─────────────────────────────────────┘

4.4.2 快速记录卡片

┌─────────────────────────────────────┐
│  快速记录                            │
│                                     │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│  │   🥤    │ │   🥛    │ │   ☕    │ │   🍶    │
│  │  小杯   │ │  中杯   │ │  大杯   │ │  水瓶   │
│  │ 150ml  │ │ 250ml  │ │ 350ml  │ │ 500ml  │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘
└─────────────────────────────────────┘

4.4.3 今日概览卡片

┌─────────────────────────────────────┐
│  📊 今日概览                         │
│                                     │
│  ┌─────────────┐ ┌─────────────┐   │
│  │ 💧 已喝水量  │ │ 🎯 目标水量  │   │
│  │   1500ml    │ │   2000ml    │   │
│  └─────────────┘ └─────────────┘   │
│                                     │
│  ┌─────────────┐ ┌─────────────┐   │
│  │ 🥤 剩余水量  │ │ 📝 记录次数  │   │
│  │    500ml    │ │    6次      │   │
│  └─────────────┘ └─────────────┘   │
└─────────────────────────────────────┘

4.4.4 饮水记录卡片

┌─────────────────────────────────────┐
│  🕐 08:00                           │
│  共 2 次 · 500ml                    │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  🥛  中杯 · 250ml     08:15  │   │
│  │                      🗑️     │   │
│  └─────────────────────────────┘   │
│  ┌─────────────────────────────┐   │
│  │  🍶  水瓶 · 500ml     08:45  │   │
│  │                      🗑️     │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

4.4.5 统计卡片

┌─────────────────────────────────────┐
│  📈 今日统计                         │
│                                     │
│  ┌─────────────┐ ┌─────────────┐   │
│  │ 💧 总饮水量  │ │ 📝 饮水次数  │   │
│  │   1500ml    │ │    6次      │   │
│  │ ══════●───  │ │ ═══●──────  │   │
│  └─────────────┘ └─────────────┘   │
│                                     │
│  ┌─────────────┐ ┌─────────────┐   │
│  │ 🧮 平均每次  │ │ 🎯 完成度    │   │
│  │   250ml     │ │    75%      │   │
│  │ ═══●─────── │ │ ══════●───  │   │
│  └─────────────┘ └─────────────┘   │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 水量目标计算实现

int calculateDailyTarget() {
  final baseWater = weight * 30;
  final activityAdjusted = baseWater * activityLevel.multiplier;
  final weatherAdjusted = activityAdjusted * weatherType.multiplier;
  return weatherAdjusted.round();
}

计算公式说明：

$$\text{每日目标}=\text{体重}(kg)\times 30ml\times \text{活动量乘数}\times \text{天气乘数}$$

5.2 饮水记录管理实现

void _addWaterRecord(CupSize cupSize) {
  setState(() {
    _todayRecords.add(WaterRecord(
      id: 'record_${DateTime.now().millisecondsSinceEpoch}',
      amount: cupSize.ml,
      time: DateTime.now(),
      cupSize: cupSize,
    ));
  });
  _showDrinkSuccessSnackBar(cupSize);
}

void _deleteRecord(WaterRecord record) {
  setState(() {
    _todayRecords.remove(record);
  });
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: const Text('记录已删除'),
      action: SnackBarAction(
        label: '撤销',
        onPressed: () => setState(() => _todayRecords.add(record)),
      ),
    ),
  );
}

5.3 提醒定时器实现

void _startReminderTimer() {
  _reminderTimer?.cancel();
  _reminderTimer = Timer.periodic(
    Duration(minutes: _settings.reminderInterval),
    (timer) => _showReminderNotification(),
  );
}

void _showReminderNotification() {
  final completed = _getTotalWaterToday();
  final target = _settings.calculateDailyTarget();
  if (completed < target) {
    _showWaterReminderDialog();
  }
}

5.4 进度环绘制实现

class WaterProgressPainter extends CustomPainter {
  final double progress;
  final double animationValue;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = min(size.width, size.height) / 2 - 10;

    final bgPaint = Paint()
      ..color = color.withOpacity(0.1)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12
      ..strokeCap = StrokeCap.round;

    canvas.drawCircle(center, radius, bgPaint);

    final progressPaint = Paint()
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12
      ..strokeCap = StrokeCap.round;

    final sweepAngle = 2 * pi * progress;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      sweepAngle,
      false,
      progressPaint,
    );

    final waterPaint = Paint()
      ..color = color.withOpacity(0.2)
      ..style = PaintingStyle.fill;

    final waterHeight = size.height * progress;
    final waterPath = Path();
    waterPath.moveTo(0, size.height);
    waterPath.lineTo(0, size.height - waterHeight);

    for (double x = 0; x <= size.width; x += 5) {
      final y = size.height - waterHeight + 
        sin((x / size.width * 4 * pi) + animationValue * 2 * pi) * 5;
      waterPath.lineTo(x, y);
    }

    waterPath.lineTo(size.width, size.height);
    waterPath.close();

    canvas.clipPath(Path()..addOval(Rect.fromCircle(center: center, radius: radius - 15)));
    canvas.drawPath(waterPath, waterPaint);
  }
}

5.5 周图表绘制实现

class WeeklyChartPainter extends CustomPainter {
  final List<int> data;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final weekDays = ['一', '二', '三', '四', '五', '六', '日'];
    final maxValue = data.reduce(max);
    final barWidth = (size.width - 60) / 7;
    final chartHeight = size.height - 40;

    for (int i = 0; i < 7; i++) {
      final x = 30 + i * barWidth + barWidth / 4;
      final barHeight = (data[i] / maxValue) * chartHeight * 0.8;
      final y = chartHeight - barHeight;

      final paint = Paint()
        ..color = color.withOpacity(i == DateTime.now().weekday - 1 ? 1.0 : 0.5)
        ..style = PaintingStyle.fill
        ..strokeCap = StrokeCap.round;

      final rrect = RRect.fromRectAndRadius(
        Rect.fromLTWH(x, y, barWidth / 2, barHeight),
        const Radius.circular(4),
      );
      canvas.drawRRect(rrect, paint);
    }
  }
}

---

六、交互设计

6.1 饮水记录流程

6.2 设置修改流程

6.3 提醒响应流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 数据持久化

存储功能：

• 使用 SharedPreferences 存储用户设置
• 使用 SQLite 存储历史饮水记录
• 支持数据导出和备份
• 支持数据恢复功能

7.2.2 本地通知

通知功能：

• 集成 flutter_local_notifications
• 支持自定义通知铃声
• 支持通知内容个性化
• 支持静默时段设置

7.2.3 云端同步

同步功能：

• 用户账号系统
• 多设备数据同步
• 数据加密传输
• 离线数据缓存

---

八、注意事项

8.1 开发注意事项

1. 数据存储：确保用户数据安全存储，支持数据迁移

2. 提醒机制：合理设置提醒间隔，避免过度打扰

3. 电量消耗：优化定时器实现，减少电量消耗

4. 隐私保护：确保用户健康数据不被泄露

5. 设备兼容性：适配不同屏幕尺寸和系统版本

8.2 常见问题

问题	原因	解决方案
提醒不触发	定时器未启动	检查定时器初始化
数据丢失	未持久化存储	集成 SharedPreferences
进度不准	计算错误	检查水量计算逻辑
界面卡顿	动画过多	优化动画实现
内存泄漏	定时器未释放	正确释放资源

8.3 使用技巧

💧 智能喝水提醒使用技巧 💧

日常使用

• 根据实际情况选择活动量和天气
• 养成定时喝水的好习惯
• 记录每次饮水量，保持数据准确

目标设定

• 初次使用建议使用默认目标
• 根据身体感受适当调整目标
• 运动后及时补充水分

提醒设置

• 设置合理的提醒间隔
• 避免在睡眠时段收到提醒
• 可以临时关闭提醒功能

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Android	API 21+
iOS	12.0+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_water_reminder.dart --web-port 8145

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_water_reminder.dart

# 运行到Android设备
flutter run -d android lib/main_water_reminder.dart

# 代码分析
flutter analyze lib/main_water_reminder.dart

9.3 依赖配置

在 pubspec.yaml 中添加以下依赖（完整版需要）：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2
  flutter_local_notifications: ^17.2.2
  connectivity_plus: ^5.0.2

---

十、总结

智能喝水提醒助手应用通过科学的饮水目标计算、便捷的记录方式、智能的提醒机制，帮助用户养成健康的饮水习惯。应用支持四种活动量等级、四种天气类型、四种杯子规格，满足不同用户的个性化需求。

核心功能涵盖智能目标计算、快速记录、定时提醒、饮水历史、统计分析、个性化设置六大模块。用户可以轻松记录每日饮水量，查看详细的统计数据，了解自己的饮水习惯，从而更好地管理身体健康。

应用采用 Material Design 3 设计规范，以清新的蓝色为主色调，象征生命之源——水。通过本应用，希望能够帮助用户养成健康的饮水习惯，保持身体水分充足，远离脱水困扰。

智能喝水提醒助手——让健康饮水成为一种习惯

---