Flutter 框架跨平台鸿蒙开发 - 上门维修预约系统

李李李勃谦2026-04-12 8:12

上门维修预约系统应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图



1.1 应用简介

上门维修预约系统是一款面向社区居民的家政维修服务平台。支持维修预约、服务评价、师傅管理、订单跟踪等功能，帮助居民便捷预约各类上门维修服务。应用以稳重的蓝色为主色调，象征专业与可靠。涵盖服务广场、预约服务、我的订单、个人中心四大模块。

1.2 核心功能

功能模块 功能描述 实现方式
服务分类 8种维修服务类型 枚举定义
在线预约 预约上门维修服务 表单提交
师傅选择 查看师傅信息选择 列表展示
订单管理 查看和管理订单 状态流转
服务评价 对服务进行评价 星级评分
费用估算 预估维修费用 计算展示

1.3 服务类型定义

序号 类型名称 Emoji 参考价格 描述
1 水电维修 🔧 50-200元 水管、电路、开关插座
2 家电维修 📺 80-300元 空调、冰箱、洗衣机
3 管道疏通 🚿 100-300元 下水道、马桶疏通
4 门窗维修 🚪 80-200元 门锁、窗户、合页
5 开锁换锁 🔐 100-500元 开锁、换锁芯
6 墙面修补 🧱 50-150元 墙面裂缝、渗水
7 灯具安装 💡 30-100元 灯具安装、更换
8 其他服务 🛠️ 面议 其他维修服务

1.4 订单状态定义

序号 状态名称 Emoji 描述
1 待接单 ⏳ 等待师傅接单
2 已接单 ✅ 师傅已接单
3 服务中 🔧 正在维修服务
4 待支付 💰 服务完成待支付
5 已完成 🎉 订单已完成
6 已取消 ❌ 订单已取消

1.5 服务时段定义

序号 时段名称 时间范围 描述
1 上午 08:00-12:00 上午时段
2 下午 14:00-18:00 下午时段
3 晚上 18:00-21:00 晚上时段
4 全天 08:00-21:00 全天可约

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 setState -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

复制代码 
lib/
└── main_home_repair_booking.dart
    ├── HomeRepairBookingApp            # 应用入口
    ├── ServiceType                     # 服务类型枚举
    ├── OrderStatus                     # 订单状态枚举
    ├── ServiceTimeSlot                 # 服务时段枚举
    ├── RepairService                   # 维修服务模型
    ├── RepairOrder                     # 维修订单模型
    ├── Worker                          # 师傅模型
    ├── Review                          # 评价模型
    ├── HomeRepairBookingHomePage       # 主页面（底部导航）
    ├── _buildSquarePage                # 服务广场页
    ├── _buildBookingPage               # 预约服务页
    ├── _buildOrdersPage                # 我的订单页
    ├── _buildProfilePage               # 个人中心页
    └── 各类辅助组件

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

HomeRepairBookingHomePage
服务广场
预约服务
我的订单
个人中心
服务分类
师傅列表
服务详情
选择服务
选择师傅
预约时间
订单列表
订单详情
服务评价
个人信息
地址管理
历史记录
预约管理器

BookingManager
订单处理器

OrderHandler
评价服务

ReviewService
RepairService

维修服务
RepairOrder

维修订单
Worker

师傅信息
Review

评价

2.2 类图设计

has
has
has
has
references
HomeRepairBookingApp
+Widget build()
<<enumeration>>
ServiceType
+String label
+String emoji
+int minPrice
+int maxPrice
+plumbing()
+appliance()
+drain()
+door()
+lock()
+wall()
+light()
+other()
<<enumeration>>
OrderStatus
+String label
+String emoji
+pending()
+accepted()
+serving()
+payment()
+completed()
+cancelled()
<<enumeration>>
ServiceTimeSlot
+String label
+String timeRange
+morning()
+afternoon()
+evening()
+allday()
RepairService
+String id
+String name
+ServiceType type
+String description
+int basePrice
+int estimatedTime
+List commonIssues
RepairOrder
+String id
+String serviceId
+String serviceName
+ServiceType serviceType
+OrderStatus status
+String workerId
+String workerName
+String address
+String contactName
+String contactPhone
+DateTime serviceDate
+ServiceTimeSlot timeSlot
+String description
+int estimatedCost
+int actualCost
+DateTime createTime
Worker
+String id
+String name
+String avatar
+double rating
+int orderCount
+int experience
+List services
+String introduction
Review
+String id
+String orderId
+String userId
+String workerId
+int rating
+String content
+DateTime createTime

2.3 页面导航流程

广场
预约
订单
我的
应用启动
服务广场
底部导航
浏览服务
预约服务
我的订单
个人中心
选择分类
查看师傅
服务详情
立即预约
选择服务
选择师傅
选择时间
填写地址
确认预约
订单列表
订单详情
取消订单
服务评价
个人信息
地址管理
历史记录

2.4 预约流程

师傅 订单系统 预约页面 服务广场 用户 师傅 订单系统 预约页面 服务广场 用户 浏览服务 显示服务列表 选择服务 显示可选师傅 选择师傅和时间 创建订单 推送新订单 接单确认 通知接单成功 上门服务 确认完成 请求评价 提交评价

三、核心模块设计

3.1 服务广场模块

服务广场是用户浏览和选择维修服务的主要入口，提供服务分类、师傅推荐等功能。

核心功能：

  1. 服务分类 - 按维修类型分类展示
  2. 热门服务 - 展示热门维修服务
  3. 师傅推荐 - 推荐优质师傅
  4. 快速搜索 - 搜索服务类型
  5. 价格参考 - 显示参考价格

3.2 预约服务模块

预约服务模块允许用户选择服务、师傅、时间进行预约。

核心功能：

  1. 服务选择 - 选择维修服务类型
  2. 师傅选择 - 查看师傅信息选择
  3. 时间选择 - 选择预约日期和时段
  4. 地址填写 - 填写服务地址
  5. 问题描述 - 描述维修问题
  6. 费用预估 - 预估服务费用

3.3 我的订单模块

我的订单模块管理用户的维修订单，提供状态追踪和评价功能。

核心功能：

  1. 订单列表 - 查看所有订单
  2. 状态筛选 - 按订单状态筛选
  3. 订单详情 - 查看详细信息
  4. 取消订单 - 取消未接单订单
  5. 服务评价 - 对完成订单评价

3.4 个人中心模块

个人中心模块管理用户信息、地址和历史记录。

核心功能：

  1. 个人信息 - 查看编辑个人信息
  2. 地址管理 - 管理服务地址
  3. 历史记录 - 查看历史订单
  4. 意见反馈 - 提交意见反馈

四、数据模型设计

4.1 维修服务模型

dart 复制代码 
class RepairService {
  final String id;              // 服务ID
  final String name;            // 服务名称
  final ServiceType type;       // 服务类型
  final String description;     // 服务描述
  final int basePrice;          // 基础价格
  final int estimatedTime;      // 预计时长（分钟）
  final List<String> commonIssues; // 常见问题
}

4.2 维修订单模型

dart 复制代码 
class RepairOrder {
  final String id;              // 订单ID
  final String serviceId;       // 服务ID
  final String serviceName;     // 服务名称
  final ServiceType serviceType;// 服务类型
  OrderStatus status;           // 订单状态
  final String workerId;        // 师傅ID
  final String workerName;      // 师傅名称
  final String address;         // 服务地址
  final String contactName;     // 联系人
  final String contactPhone;    // 联系电话
  final DateTime serviceDate;   // 服务日期
  final ServiceTimeSlot timeSlot; // 服务时段
  final String description;     // 问题描述
  final int estimatedCost;      // 预估费用
  int actualCost;               // 实际费用
  final DateTime createTime;    // 创建时间
}

4.3 师傅模型

dart 复制代码 
class Worker {
  final String id;              // 师傅ID
  final String name;            // 姓名
  final String avatar;          // 头像
  final double rating;          // 评分
  final int orderCount;         // 订单数
  final int experience;         // 从业年限
  final List<ServiceType> services; // 擅长服务
  final String introduction;    // 个人简介
}

五、界面设计

5.1 配色方案

颜色类型 色值 用途
主色 #2196F3 品牌色、按钮
次色 #64B5F6 辅助色、背景
强调色 #FF9800 重要信息
背景色 #F5F5F5 页面背景
卡片色 #FFFFFF 卡片背景
文字色 #212121 主要文字
次文字 #757575 次要文字

5.2 字体规范

字体类型 字号 字重 用途
大标题 24sp Bold 页面标题
标题 18sp Medium 卡片标题
正文 14sp Regular 正文内容
辅助文字 12sp Regular 辅助信息
小字 10sp Regular 标签、时间

5.3 间距规范

间距类型 数值 用途
页面边距 16dp 页面左右边距
卡片间距 12dp 卡片之间间距
内容间距 8dp 内容元素间距
紧凑间距 4dp 紧凑元素间距

六、关键代码实现

6.1 主入口

dart 复制代码 
void main() {
  runApp(const HomeRepairBookingApp());
}

class HomeRepairBookingApp extends StatelessWidget {
  const HomeRepairBookingApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '上门维修预约系统',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF2196F3),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const HomeRepairBookingHomePage(),
    );
  }
}

6.2 服务类型枚举

dart 复制代码 
enum ServiceType {
  plumbing(label: '水电维修', emoji: '🔧', minPrice: 50, maxPrice: 200),
  appliance(label: '家电维修', emoji: '📺', minPrice: 80, maxPrice: 300),
  drain(label: '管道疏通', emoji: '🚿', minPrice: 100, maxPrice: 300),
  door(label: '门窗维修', emoji: '🚪', minPrice: 80, maxPrice: 200),
  lock(label: '开锁换锁', emoji: '🔐', minPrice: 100, maxPrice: 500),
  wall(label: '墙面修补', emoji: '🧱', minPrice: 50, maxPrice: 150),
  light(label: '灯具安装', emoji: '💡', minPrice: 30, maxPrice: 100),
  other(label: '其他服务', emoji: '🛠️', minPrice: 0, maxPrice: 0);

  final String label;
  final String emoji;
  final int minPrice;
  final int maxPrice;

  const ServiceType({
    required this.label,
    required this.emoji,
    required this.minPrice,
    required this.maxPrice,
  });
}

七、测试用例

7.1 功能测试

测试项 测试步骤 预期结果
浏览服务 进入服务广场 显示服务列表
选择服务 点击服务类型 显示相关师傅
预约服务 填写预约信息 预约成功
查看订单 进入我的订单 显示订单列表
取消订单 点击取消按钮 取消成功
服务评价 提交评价 评价成功

7.2 边界测试

测试项 测试条件 预期结果
空列表 无订单数据 显示空状态提示
时间选择 选择过去时间 提示不可选
取消限制 已接单订单 不可取消

八、部署说明

8.1 环境要求

  • Flutter SDK >= 3.0.0
  • Dart SDK >= 2.17.0
  • Android SDK >= 21 (鸿蒙OS兼容)

8.2 运行命令

bash 复制代码 
flutter run -d web-server --web-port 8152 --web-hostname 0.0.0.0
相关推荐
冰糖葫芦三剑客2 小时前
华为 Android APP 应用内生成合成内容的文件元数据中添加隐式标识的截图 开发要怎么生成？
android·华为
qhqh3102 小时前
华为设备SRV6实验
华为
2301_822703204 小时前
鸿蒙Flutter第三方库FlutterUnit组件百科适配——具体示例还原演示1
算法·flutter·华为·harmonyos·鸿蒙
前端不太难4 小时前
一天做出：鸿蒙 + AI 游戏 Demo
人工智能·游戏·harmonyos
木斯佳7 小时前
HarmonyOS 6实战：AI Action富媒体卡片迭代——实现快照分享
人工智能·harmonyos·媒体
不爱吃糖的程序媛12 小时前
适配鸿蒙PC sha_ohos.patch 补丁文件详解
华为·harmonyos
AI_零食12 小时前
声音分贝模拟与波动动画展示：鸿蒙Flutter框架 实现的声音可视化应用
学习·flutter·华为·开源·harmonyos
独特的螺狮粉14 小时前
Flutter 框架跨平台鸿蒙开发 - 关系测试应用
flutter·华为·架构·开源·鸿蒙
SoraLuna14 小时前
「鸿蒙智能体实战记录 10」节气知识展示卡片开发与工作流绑定实现
华为·harmonyos
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Oh My Codex 快速使用指南07AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析08AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了