Flutter 框架跨平台鸿蒙开发 - 智能家庭药箱
运行效果图智能家庭药箱是一款专注于家庭健康管理的实用工具应用。通过扫码录入、效期提醒、用药指导、在线问医生等功能,帮助用户科学管理家庭药品,守护家人健康。应用以清新的绿色为主色调,象征健康与生命活力。涵盖药品管理、用药提醒、在线咨询、家庭档案四大模块,让家庭健康管理变得简单高效。序号分类名称Emoji描述1感冒发烧🤒感冒、退烧类药物2肠胃消化💊肠胃、消化类药物3外用药品🩹创可贴、消毒液等4慢
智能家庭药箱应用
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图




1.1 应用简介
智能家庭药箱是一款专注于家庭健康管理的实用工具应用。通过扫码录入、效期提醒、用药指导、在线问医生等功能,帮助用户科学管理家庭药品,守护家人健康。应用以清新的绿色为主色调,象征健康与生命活力。涵盖药品管理、用药提醒、在线咨询、家庭档案四大模块,让家庭健康管理变得简单高效。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 药品管理 | 药品信息录入与编辑 | 表单输入 |
| 扫码录入 | 条形码/二维码快速录入 | 扫码插件 |
| 效期提醒 | 药品过期、库存不足提醒 | 本地通知 |
| 用药指导 | 用药时间、剂量、注意事项 | 定时任务 |
| 在线问医生 | 远程医疗咨询 | 即时通讯 |
| 家庭档案 | 家庭成员健康档案管理 | 数据存储 |
1.3 药品分类定义
| 序号 | 分类名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 感冒发烧 | 🤒 | 感冒、退烧类药物 |
| 2 | 肠胃消化 | 💊 | 肠胃、消化类药物 |
| 3 | 外用药品 | 🩹 | 创可贴、消毒液等 |
| 4 | 慢性病药 | 💊 | 高血压、糖尿病等 |
| 5 | 儿童用药 | 👶 | 儿童专用药品 |
| 6 | 急救药品 | 🚑 | 急救箱常备药品 |
1.4 提醒类型定义
| 序号 | 提醒类型 | Emoji | 描述 |
|---|---|---|---|
| 1 | 用药提醒 | ⏰ | 定时提醒服药 |
| 2 | 效期提醒 | ⚠️ | 药品即将过期 |
| 3 | 库存提醒 | 📦 | 药品库存不足 |
| 4 | 复诊提醒 | 🏥 | 定期复诊提醒 |
1.5 家庭成员角色定义
| 序号 | 角色名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 家长 | 👨👩👧 | 拥有管理权限 |
| 2 | 成员 | 👤 | 普通家庭成员 |
| 3 | 儿童 | 👶 | 儿童成员 |
| 4 | 老人 | 👴 | 老年成员 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 本地存储 | SharedPreferences | - |
| 扫码功能 | qr_code_scanner | - |
| 通知服务 | flutter_local_notifications | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_smart_medicine_box.dart
├── SmartMedicineBoxApp # 应用入口
├── MedicineCategory # 药品分类枚举
├── ReminderType # 提醒类型枚举
├── FamilyRole # 家庭角色枚举
├── Medicine # 药品模型
├── Reminder # 提醒模型
├── FamilyMember # 家庭成员模型
├── HealthRecord # 健康档案模型
├── Doctor # 医生模型
├── Consultation # 咨询记录模型
├── SmartMedicineBoxHomePage # 主页面(底部导航)
├── _buildMedicinePage # 药箱页面
├── _buildReminderPage # 提醒页面
├── _buildConsultPage # 咨询页面
├── _buildProfilePage # 我的页面
├── MedicineCard # 药品卡片组件
├── ReminderCard # 提醒卡片组件
└── ScanDialog # 扫码对话框
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 药品录入流程
三、核心模块设计
3.1 数据模型设计
3.1.1 药品分类枚举 (MedicineCategory)
enum MedicineCategory {
coldFever(label: '感冒发烧', emoji: '🤒', description: '感冒、退烧类药物'),
digestive(label: '肠胃消化', emoji: '💊', description: '肠胃、消化类药物'),
external(label: '外用药品', emoji: '🩹', description: '创可贴、消毒液等'),
chronic(label: '慢性病药', emoji: '💊', description: '高血压、糖尿病等'),
children(label: '儿童用药', emoji: '👶', description: '儿童专用药品'),
emergency(label: '急救药品', emoji: '🚑', description: '急救箱常备药品');
final String label;
final String emoji;
final String description;
}
3.1.2 提醒类型枚举 (ReminderType)
enum ReminderType {
medication(label: '用药提醒', emoji: '⏰'),
expiry(label: '效期提醒', emoji: '⚠️'),
stock(label: '库存提醒', emoji: '📦'),
checkup(label: '复诊提醒', emoji: '🏥');
final String label;
final String emoji;
}
3.1.3 药品模型 (Medicine)
class Medicine {
final String id; // 药品ID
final String name; // 药品名称
final String brand; // 品牌
final MedicineCategory category; // 药品分类
final String barcode; // 条形码
final DateTime expiryDate; // 有效期
final int quantity; // 库存数量
final String dosage; // 用法用量
final String frequency; // 使用频率
final String notes; // 备注
final DateTime addedAt; // 添加时间
}
3.1.4 提醒模型 (Reminder)
class Reminder {
final String id; // 提醒ID
final ReminderType type; // 提醒类型
final String medicineId; // 关联药品ID
final DateTime remindAt; // 提醒时间
final bool isActive; // 是否激活
final String message; // 提醒内容
}
3.1.5 药品分类分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 药箱页结构
3.2.3 药品卡片结构
3.2.4 提醒页结构
3.3 药品管理逻辑
3.4 提醒服务逻辑
四、UI设计规范
4.1 配色方案
应用以清新的绿色为主色调,象征健康与生命活力:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #4CAF50 (Green) | 导航、主题元素 |
| 辅助色 | #66BB6A | 药箱页面 |
| 第三色 | #81C784 | 提醒页面 |
| 强调色 | #A5D6A7 | 咨询页面 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 药品卡片 |
| 警告色 | #FF9800 | 效期警告 |
| 危险色 | #F44336 | 过期提示 |
4.2 状态颜色定义
| 状态 | 色值 | 视觉效果 |
|---|---|---|
| 正常 | #4CAF50 | 绿色,状态良好 |
| 即将过期 | #FF9800 | 橙色,需要注意 |
| 已过期 | #F44336 | 红色,禁止使用 |
| 库存充足 | #4CAF50 | 绿色,库存正常 |
| 库存不足 | #FF9800 | 橙色,需要补充 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 药品名称 | 16px | Bold | #000000 |
| 分类标签 | 12px | Regular | 白色 |
| 效期信息 | 12px | Regular | 灰色 |
| 统计数字 | 20px | Bold | 白色 |
4.4 组件规范
4.4.1 药品卡片
┌─────────────────────────────────────┐
│ 🤒 感冒灵颗粒 │
│ 修正药业 │
│ │
│ 有效期: 2025-12-31 │
│ 库存: 3盒 │
│ │
│ [编辑] [提醒] [删除] │
└─────────────────────────────────────┘
4.4.2 提醒卡片
┌─────────────────────────────────────┐
│ ⏰ 用药提醒 │
│ │
│ 感冒灵颗粒 - 每日3次 │
│ 下次服药: 14:00 │
│ │
│ [已服用] [稍后提醒] [查看详情] │
└─────────────────────────────────────┘
4.4.3 分类筛选
┌─────────────────────────────────────┐
│ 药品分类 │
│ │
│ [🤒 感冒发烧] [💊 肠胃消化] │
│ [🩹 外用药品] [💊 慢性病药] │
│ [👶 儿童用药] [🚑 急救药品] │
└─────────────────────────────────────┘
4.4.4 药品详情
┌─────────────────────────────────────┐
│ 感冒灵颗粒 │
│ │
│ 品牌: 修正药业 │
│ 分类: 🤒 感冒发烧 │
│ 条码: 6901234567890 │
│ │
│ 有效期: 2025-12-31 │
│ 库存: 3盒 │
│ │
│ 用法用量: │
│ 一次1袋,一日3次 │
│ │
│ 注意事项: │
│ 1. 忌烟、酒及辛辣食物 │
│ 2. 不宜在服药期间同时服用滋补性中药 │
│ │
│ [编辑] [添加提醒] [分享] │
└─────────────────────────────────────┘
4.4.5 扫码对话框
┌─────────────────────────────────────┐
│ 扫码录入 │
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ 📷 扫描区域 │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 将条形码放入框内自动扫描 │
│ │
│ [手动输入] [取消] │
└─────────────────────────────────────┘
五、核心功能实现
5.1 药品列表展示实现
class MedicineListPage extends StatefulWidget {
State<MedicineListPage> createState() => _MedicineListPageState();
}
class _MedicineListPageState extends State<MedicineListPage> {
List<Medicine> _medicines = [];
MedicineCategory? _selectedCategory;
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
SliverAppBar(
title: Text('家庭药箱'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () => _showSearchDialog(),
),
],
),
SliverToBoxAdapter(
child: _buildCategoryFilter(),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.75,
),
delegate: SliverChildBuilderDelegate(
(context, index) => MedicineCard(medicine: _medicines[index]),
childCount: _medicines.length,
),
),
],
);
}
}
5.2 扫码录入实现
class ScanDialog extends StatefulWidget {
State<ScanDialog> createState() => _ScanDialogState();
}
class _ScanDialogState extends State<ScanDialog> {
final QRViewController? _controller;
bool _isScanning = true;
void _onQRViewCreated(QRViewController controller) {
controller.scannedDataStream.listen((scanData) {
if (_isScanning && scanData.code != null) {
setState(() => _isScanning = false);
_queryMedicineInfo(scanData.code!);
}
});
}
Future<void> _queryMedicineInfo(String barcode) async {
final medicineInfo = await MedicineApi.queryByBarcode(barcode);
if (medicineInfo != null) {
_showMedicineConfirmDialog(medicineInfo);
} else {
_showManualInputDialog(barcode);
}
}
}
5.3 效期检查实现
class ExpiryChecker {
static List<Medicine> checkExpiringMedicines(List<Medicine> medicines) {
final now = DateTime.now();
final thirtyDaysLater = now.add(Duration(days: 30));
return medicines.where((medicine) {
return medicine.expiryDate.isBefore(thirtyDaysLater) &&
medicine.expiryDate.isAfter(now);
}).toList();
}
static List<Medicine> checkExpiredMedicines(List<Medicine> medicines) {
final now = DateTime.now();
return medicines.where((medicine) {
return medicine.expiryDate.isBefore(now);
}).toList();
}
}
5.4 提醒服务实现
class ReminderService {
static final FlutterLocalNotificationsPlugin _notifications =
FlutterLocalNotificationsPlugin();
static Future<void> initialize() async {
final settings = AndroidInitializationSettings('@mipmap/ic_launcher');
final initSettings = InitializationSettings(android: settings);
await _notifications.initialize(initSettings);
}
static Future<void> scheduleMedicineReminder({
required int id,
required String title,
required String body,
required DateTime scheduledTime,
}) async {
await _notifications.zonedSchedule(
id,
title,
body,
tz.TZDateTime.from(scheduledTime, tz.local),
const NotificationDetails(
android: AndroidNotificationDetails(
'medicine_reminder',
'用药提醒',
importance: Importance.high,
),
),
androidAllowWhileIdle: true,
uiLocalNotificationDateInterpretation:
UILocalNotificationDateInterpretation.absoluteTime,
);
}
}
5.5 药品添加实现
void _addMedicine(Medicine medicine) async {
final medicineManager = MedicineManager();
await medicineManager.addMedicine(medicine);
if (medicine.expiryDate.isBefore(
DateTime.now().add(Duration(days: 30))
)) {
await ReminderService.scheduleMedicineReminder(
id: medicine.hashCode,
title: '药品即将过期',
body: '${medicine.name}即将过期,请注意使用',
scheduledTime: DateTime.now().add(Duration(hours: 1)),
);
}
if (medicine.quantity < 3) {
await ReminderService.scheduleMedicineReminder(
id: medicine.hashCode + 1,
title: '药品库存不足',
body: '${medicine.name}库存不足,请及时补充',
scheduledTime: DateTime.now().add(Duration(hours: 2)),
);
}
}
六、交互设计
6.1 药品录入流程
6.2 用药提醒流程
6.3 在线咨询流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 AI智能用药建议
AI功能:
- 药物相互作用检测
- 智能用药时间推荐
- 副作用预警
- 个性化用药方案
7.2.2 健康档案管理
档案功能:
- 家庭成员健康档案
- 病历记录管理
- 体检报告存储
- 健康趋势分析
7.2.3 社交功能
社交功能:
- 家庭成员共享
- 用药经验分享
- 健康知识社区
- 专家问答平台
八、注意事项
8.1 开发注意事项
-
数据安全:药品信息涉及隐私,需做好数据加密
-
提醒准确性:提醒服务需保证准时准确
-
扫码识别:需处理光线不足、条码损坏等异常情况
-
数据同步:多设备间数据同步需考虑冲突处理
-
权限管理:摄像头、通知等权限需合理申请
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 扫码失败 | 光线不足 | 提示用户调整光线 |
| 提醒不响 | 权限未开启 | 引导用户开启权限 |
| 数据丢失 | 未及时同步 | 增加自动备份机制 |
| 药品信息错误 | 数据库不全 | 支持手动编辑 |
| 通知延迟 | 系统限制 | 使用高优先级通知 |
8.3 使用技巧
💊 家庭药箱管理技巧 💊
药品分类建议
- 按用途分类:感冒、肠胃、外用等
- 按成员分类:成人、儿童、老人专用
- 按频次分类:常用、备用、急救
效期管理技巧
- 新药放后面,旧药放前面
- 定期检查效期(建议每月一次)
- 即将过期药品单独存放
用药提醒设置
- 根据医嘱设置服药时间
- 饭前饭后要区分清楚
- 多种药品注意间隔时间
库存管理建议
- 常用药保持1-2盒备用
- 急救药品定期检查
- 过期药品及时处理
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Web浏览器 | Chrome 90+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_smart_medicine_box.dart --web-port 8140
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_smart_medicine_box.dart
# 代码分析
flutter analyze lib/main_smart_medicine_box.dart
十、总结
智能家庭药箱应用通过药品管理、用药提醒、在线咨询、家庭档案四大模块,为用户提供了一个便捷的家庭健康管理平台。应用支持扫码录入、效期提醒、用药指导、在线问医生等功能,让家庭健康管理变得简单高效。
核心功能涵盖药品录入、效期管理、用药提醒、在线咨询四大模块。药品录入支持扫码和手动两种方式,快速便捷;效期管理自动检测过期药品,及时提醒;用药提醒支持多种提醒类型,确保按时服药;在线咨询连接专业医生,提供医疗建议。
应用采用 Material Design 3 设计规范,以清新的绿色为主色调,象征健康与生命活力。通过本应用,希望能够帮助用户科学管理家庭药品,守护家人健康,让健康管理变得简单而高效。
智能家庭药箱——守护家人健康
更多推荐

所有评论(0)