Flutter框架跨平台鸿蒙开发——电子病历APP的开发流程

本文介绍了使用Flutter框架开发的跨平台电子病历APP，支持鸿蒙、Android和iOS系统。该应用采用分层架构设计，包含表现层、业务逻辑层、数据访问层和数据模型层。核心功能包括电子病历的添加、查看、编辑和删除，使用本地存储服务保存数据，确保用户隐私安全。文章展示了关键代码实现，如电子病历模型设计、数据存储服务和病历管理功能。该应用界面简洁直观，适配不同设备尺寸，为患者提供便捷的病历管理工具。

jiulong0123

332人浏览 · 2026-01-26 20:49:22

jiulong0123 · 2026-01-26 20:49:22 发布

Flutter框架跨平台鸿蒙开发——电子病历APP的开发流程

🚀运行效果展示

在这里插入图片描述

Flutter框架跨平台鸿蒙开发——电子病历APP的开发流程

前言

随着移动互联网的快速发展，电子病历（Electronic Medical Record，EMR）已经成为医疗信息化的重要组成部分。电子病历可以提高医疗服务质量，减少医疗错误，方便患者随时随地查阅自己的健康记录。本项目使用Flutter框架开发了一款跨平台电子病历APP，支持在鸿蒙、Android和iOS等平台上运行。

应用介绍

本电子病历APP主要用于存储和管理个人电子病历信息，包括患者基本信息、就诊记录、诊断结果、治疗方案、检查项目、用药记录等。用户可以通过APP方便地添加、查看、编辑和删除自己的病历记录，实现了电子病历的全生命周期管理。

应用特点

跨平台支持：基于Flutter框架开发，支持鸿蒙、Android、iOS等多个平台
响应式设计：适配不同屏幕尺寸的设备
直观易用的界面：简洁明了的用户界面，方便用户操作
数据本地存储：支持本地存储，保护用户隐私
完整的病历管理：支持病历的添加、查看、编辑和删除

核心功能实现及代码展示

1. 系统架构设计

本应用采用了分层架构设计，主要包括以下几层：

┌───────────────────────────────────────────────────────────┐
│                     表现层 (UI Layer)                    │
│  - 电子病历主页面 (ElectronicMedicalRecordScreen)        │
│  - 添加病历页面 (AddMedicalRecordScreen)                │
│  - 病历详情页面 (MedicalRecordDetailScreen)             │
└───────────────────────────────────────────────────────────┘
                                │
                                ▼
┌───────────────────────────────────────────────────────────┐
│                     业务逻辑层 (Business Layer)         │
│  - 电子病历服务 (ElectronicMedicalRecordService)       │
└───────────────────────────────────────────────────────────┘
                                │
                                ▼
┌───────────────────────────────────────────────────────────┐
│                     数据访问层 (Data Layer)            │
│  - 存储服务 (StorageService)                           │
└───────────────────────────────────────────────────────────┘
                                │
                                ▼
┌───────────────────────────────────────────────────────────┐
│                     数据模型层 (Model Layer)           │
│  - 电子病历模型 (ElectronicMedicalRecord)             │
│  - 用药记录模型 (Medication)                          │
└───────────────────────────────────────────────────────────┘

2. 核心功能实现

2.1 数据模型设计

电子病历模型是整个应用的核心数据结构，包含了患者的基本信息、就诊记录、诊断结果、治疗方案、检查项目、用药记录等信息。

/// 电子病历模型
/// 存储和管理个人电子病历信息
class ElectronicMedicalRecord {
  /// 病历ID
  final String id;
  
  /// 患者姓名
  final String patientName;
  
  /// 性别
  final String gender;
  
  /// 年龄
  final int age;
  
  /// 就诊日期
  final DateTime visitDate;
  
  /// 就诊医院
  final String hospital;
  
  /// 科室
  final String department;
  
  /// 医生姓名
  final String doctorName;
  
  /// 诊断结果
  final String diagnosis;
  
  /// 治疗方案
  final String treatmentPlan;
  
  /// 检查项目
  final List<String> examinationItems;
  
  /// 检查结果
  final Map<String, String> examinationResults;
  
  /// 用药记录
  final List<Medication> medications;
  
  /// 备注信息
  final String notes;
  
  /// 创建时间
  final DateTime createdAt;
  
  /// 更新时间
  final DateTime updatedAt;
  
  // 构造函数、fromMap、toMap和copyWith方法...
}

/// 用药记录模型
class Medication {
  /// 药物名称
  final String name;
  
  /// 剂量
  final String dosage;
  
  /// 用法
  final String usage;
  
  /// 用药天数
  final int days;
  
  // 构造函数、fromMap和toMap方法...
}

2.2 数据存储实现

本应用使用了本地存储服务来存储电子病历数据，支持SharedPreferences和内存存储两种方式，确保在不同平台上都能正常工作。

/// 通用数据获取方法
/// [key] 存储的键名
/// [defaultValue] 默认值
Future<T?> getData<T>(String key, {T? defaultValue}) async {
  try {
    dynamic value;
    
    // 尝试从SharedPreferences获取
    if (_prefs != null) {
      try {
        if (T == String) {
          value = _prefs?.getString(key);
        } else if (T == int) {
          value = _prefs?.getInt(key);
        } else if (T == double) {
          value = _prefs?.getDouble(key);
        } else if (T == bool) {
          value = _prefs?.getBool(key);
        } else if (T == List) {
          final jsonString = _prefs?.getString(key);
          if (jsonString != null) {
            value = jsonDecode(jsonString);
          }
        }
        
        if (value != null) {
          return value as T;
        }
      } catch (e) {
        debugPrint('从SharedPreferences获取数据失败，使用内存存储: $e');
      }
    }
    
    // 从内存存储获取
    final memoryValue = _memoryStorage[key];
    if (memoryValue != null) {
      if (T == String) {
        return memoryValue as T;
      } else if (T == List) {
        return jsonDecode(memoryValue) as T;
      }
    }
    
    return defaultValue;
  } catch (e) {
    debugPrint('获取数据时出错: $e');
    return defaultValue;
  }
}

2.3 电子病历服务实现

电子病历服务负责处理电子病历的业务逻辑，包括病历的添加、查看、编辑和删除等操作。

/// 电子病历存储服务
/// 负责电子病历的增删改查操作
class ElectronicMedicalRecordService {
  /// 存储服务实例
  final StorageService _storageService;
  
  /// 病历存储键
  static const String _medicalRecordsKey = 'electronic_medical_records';
  
  /// 构造函数
  ElectronicMedicalRecordService(this._storageService);
  
  /// 获取所有病历
  Future<List<ElectronicMedicalRecord>> getAllMedicalRecords() async {
    final records = await _storageService.getData<List<dynamic>>(_medicalRecordsKey);
    if (records == null) {
      return [];
    }
    return records
        .map((record) => ElectronicMedicalRecord.fromMap(Map<String, dynamic>.from(record)))
        .toList();
  }
  
  /// 根据ID获取病历
  Future<ElectronicMedicalRecord?> getMedicalRecordById(String id) async {
    final records = await getAllMedicalRecords();
    try {
      return records.firstWhere((record) => record.id == id);
    } catch (e) {
      return null;
    }
  }
  
  /// 添加病历
  Future<void> addMedicalRecord(ElectronicMedicalRecord record) async {
    final records = await getAllMedicalRecords();
    records.add(record);
    await _saveRecords(records);
  }
  
  /// 更新病历
  Future<void> updateMedicalRecord(ElectronicMedicalRecord record) async {
    final records = await getAllMedicalRecords();
    final index = records.indexWhere((r) => r.id == record.id);
    if (index != -1) {
      records[index] = record;
      await _saveRecords(records);
    }
  }
  
  /// 删除病历
  Future<void> deleteMedicalRecord(String id) async {
    final records = await getAllMedicalRecords();
    records.removeWhere((r) => r.id == id);
    await _saveRecords(records);
  }
  
  // 其他辅助方法...
}

2.4 主页面实现

主页面用于展示所有病历记录，支持添加新病历、查看病历详情等操作。

/// 电子病历主页面
class ElectronicMedicalRecordScreen extends StatefulWidget {
  const ElectronicMedicalRecordScreen({Key? key}) : super(key: key);

  @override
  State<ElectronicMedicalRecordScreen> createState() => _ElectronicMedicalRecordScreenState();
}

class _ElectronicMedicalRecordScreenState extends State<ElectronicMedicalRecordScreen> {
  /// 电子病历服务
  late ElectronicMedicalRecordService _medicalRecordService;
  
  /// 病历列表
  List<ElectronicMedicalRecord> _medicalRecords = [];
  
  /// 加载状态
  bool _isLoading = true;
  
  @override
  void initState() {
    super.initState();
    _initializeService();
  }
  
  /// 初始化服务
  Future<void> _initializeService() async {
    final storageService = StorageService();
    await storageService.init();
    _medicalRecordService = ElectronicMedicalRecordService(storageService);
    await _loadMedicalRecords();
  }
  
  /// 加载病历列表
  Future<void> _loadMedicalRecords() async {
    setState(() {
      _isLoading = true;
    });
    
    try {
      _medicalRecords = await _medicalRecordService.getAllMedicalRecords();
      // 按就诊日期倒序排序
      _medicalRecords.sort((a, b) => b.visitDate.compareTo(a.visitDate));
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('加载病历失败: $e')),
      );
    }
    
    setState(() {
      _isLoading = false;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('电子病历管理'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 跳转到添加病历页面
          final result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddMedicalRecordScreen(
                medicalRecordService: _medicalRecordService,
              ),
            ),
          );
          
          // 如果添加成功，刷新列表
          if (result == true) {
            await _loadMedicalRecords();
          }
        },
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        child: const Icon(Icons.add),
        tooltip: '添加病历',
      ),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : _medicalRecords.isEmpty
              ? _buildEmptyState()
              : _buildMedicalRecordList(),
    );
  }
  
  // 其他辅助方法...
}

开发流程

1. 需求分析

首先，我们需要明确电子病历APP的核心需求，包括：

患者基本信息管理
就诊记录管理
诊断结果管理
治疗方案管理
检查项目和结果管理
用药记录管理
病历的添加、查看、编辑和删除

2. 系统设计

根据需求分析，我们设计了系统的架构、数据模型和用户界面：

架构设计：采用分层架构，包括表现层、业务逻辑层、数据访问层和数据模型层
数据模型设计：设计了电子病历模型和用药记录模型
用户界面设计：设计了主页面、添加病历页面和病历详情页面

3. 代码实现

按照系统设计，我们逐步实现了各个模块的代码：

实现数据模型
实现存储服务
实现电子病历服务
实现主页面
实现添加病历页面
实现病历详情页面

4. 测试和调试

在实现代码后，我们进行了测试和调试，确保应用能够正常运行：

测试数据的添加、查看、编辑和删除
测试不同屏幕尺寸的适配
测试跨平台兼容性

5. 构建和发布

最后，我们构建了应用的安装包，准备发布到各个平台：

构建鸿蒙平台的HAP包
构建Android平台的APK包
构建iOS平台的IPA包

总结

本项目使用Flutter框架开发了一款跨平台电子病历APP，支持在鸿蒙、Android和iOS等平台上运行。应用实现了电子病历的全生命周期管理，包括添加、查看、编辑和删除等功能。

项目亮点

跨平台支持：基于Flutter框架，实现了一次开发，多平台运行
响应式设计：适配不同屏幕尺寸的设备
直观易用的界面：简洁明了的用户界面，方便用户操作
数据本地存储：支持本地存储，保护用户隐私
完整的病历管理：支持病历的全生命周期管理

未来展望

虽然本应用已经实现了基本的电子病历管理功能，但还有一些可以改进的地方：

添加数据同步功能，支持云端备份和恢复
添加数据加密功能，增强数据安全性
添加数据分析功能，帮助用户更好地了解自己的健康状况
添加医生端功能，支持医生查看和更新患者病历

通过本项目的开发，我们展示了Flutter框架在跨平台鸿蒙开发中的应用，为医疗信息化建设提供了一种新的解决方案。

流程图

电子病历管理流程图

数据存储流程图

技术栈

开发框架：Flutter 3.x
编程语言：Dart
状态管理：Flutter内置状态管理
本地存储：SharedPreferences + 内存存储
UI组件库：Flutter Material Components

结论

本项目成功开发了一款跨平台电子病历APP，展示了Flutter框架在鸿蒙开发中的应用。通过使用Flutter框架，我们实现了一次开发，多平台运行的目标，提高了开发效率，降低了开发成本。

电子病历APP的开发对于提高医疗服务质量，方便患者管理自己的健康记录具有重要意义。随着移动互联网的不断发展，电子病历APP将会在医疗信息化建设中发挥越来越重要的作用。

📚 参考资料

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

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

在React Native中开发鸿组件（这里指的是鸿蒙（HarmonyOS）组件），你需要了解鸿蒙开发的基础以及如何在React Native项目中集成鸿蒙应用。鸿蒙OS是由华为开发的一个分布式操作

在React Native中开发鸿组件（这里指的是鸿蒙（HarmonyOS）组件），你需要了解鸿蒙开发的基础以及如何在React Native项目中集成鸿蒙应用。鸿蒙OS是由华为开发的一个分布式操作系统，主要用于其智能设备，如手机、平板、智能手表等。首先，你需要熟悉鸿蒙OS的开发环境设置和基本开发流程。React Native本身主要用于Harmony和Harmony平台的开发，但你可以通过以下几