Flutter 框架跨平台鸿蒙开发 - 家政服务预约平台

李李李勃谦2026-04-12 9:28

家政服务预约平台应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图




1.1 应用简介

家政服务预约平台是一款便捷的生活服务应用，为用户提供专业的家政服务在线预约。涵盖保洁清洗、月嫂保姆、家电维修、管道疏通、搬家服务等多个品类，支持服务预约、订单管理、服务评价、在线支付等功能，让用户轻松享受专业、可靠的家政服务。

应用以温暖的紫色为主色调，象征专业可信赖与温馨舒适。涵盖服务首页、订单管理、消息中心、个人中心四大模块。用户可以浏览服务、选择服务人员、预约时间、查看订单状态，享受一站式家政服务体验。

1.2 核心功能

功能模块 功能描述 实现方式
服务浏览 分类展示、搜索筛选 GridView
预约下单 选择服务、时间、人员 表单组件
订单管理 查看、取消、评价 订单模型
服务人员 查看、筛选、收藏 人员卡片
消息通知 订单通知、系统消息 消息列表
评价反馈 服务评分、文字评价 评分组件

1.3 服务分类定义

序号 分类名称 Emoji 描述
1 保洁清洗 🧹 家庭保洁、深度清洁
2 月嫂保姆 👶 月嫂、育儿嫂、保姆
3 家电维修 🔧 空调、洗衣机、冰箱
4 管道疏通 🚿 下水道、马桶疏通
5 搬家服务 📦 居家搬家、公司搬迁
6 其他服务 🏠 开锁、水电维修等

1.4 订单状态定义

序号 状态名称 Emoji 描述
1 待确认 ⏳ 订单待服务商确认
2 已确认 ✅ 服务商已接单
3 服务中 🔨 服务进行中
4 已完成 🎉 服务已完成
5 已取消 ❌ 订单已取消
6 待评价 ⭐ 等待用户评价

1.5 服务人员等级定义

序号 等级名称 Emoji 描述
1 初级 🥉 新手服务人员
2 中级 🥈 熟练服务人员
3 高级 🥇 资深服务人员
4 金牌 💎 顶级服务人员

1.6 技术栈

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

1.7 项目结构

复制代码 
lib/
└── main_housekeeping_service.dart
    ├── HousekeepingServiceApp       # 应用入口
    ├── ServiceCategory              # 服务分类枚举
    ├── OrderStatus                  # 订单状态枚举
    ├── WorkerLevel                  # 服务人员等级枚举
    ├── Service                      # 服务模型
    ├── Worker                       # 服务人员模型
    ├── Order                        # 订单模型
    ├── Message                      # 消息模型
    ├── HousekeepingServiceHomePage  # 主页面（底部导航）
    ├── _buildHomePage               # 首页
    ├── _buildOrdersPage             # 订单页
    ├── _buildMessagesPage           # 消息页
    └── _buildProfilePage            # 个人中心页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

HousekeepingServiceHomePage
首页
订单页
消息页
个人中心页
分类导航
服务列表
热门推荐
服务人员
订单列表
订单详情
评价功能
消息列表
通知详情
个人信息
地址管理
收藏管理
订单管理

OrderManager
服务匹配

ServiceMatcher
消息推送

MessagePusher
Service

服务
Worker

服务人员
Order

订单
Message

消息

2.2 类图设计

belongs to
has
skilled in
contains
assigned to
has
HousekeepingServiceApp
+Widget build()
<<enumeration>>
ServiceCategory
+String label
+String emoji
+cleaning()
+nanny()
+repair()
+plumbing()
+moving()
+other()
<<enumeration>>
OrderStatus
+String label
+String emoji
+pending()
+confirmed()
+inService()
+completed()
+cancelled()
+toReview()
<<enumeration>>
WorkerLevel
+String label
+String emoji
+junior()
+intermediate()
+senior()
+gold()
Service
+String id
+String name
+ServiceCategory category
+double price
+String unit
+String description
+int duration
Worker
+String id
+String name
+String avatar
+WorkerLevel level
+List<ServiceCategory> skills
+double rating
+int orderCount
+String introduction
Order
+String id
+Service service
+Worker worker
+OrderStatus status
+DateTime scheduledTime
+String address
+double amount
+String? review
+double? rating
Message
+String id
+String title
+String content
+DateTime createdAt
+bool isRead
+String type

2.3 页面导航流程

首页
订单
消息
我的
应用启动
首页
底部导航
浏览服务
订单列表
消息中心
个人中心
选择分类
查看服务
选择人员
选择时间
确认预约
查看详情
取消订单
评价服务
查看通知
管理信息

2.4 预约流程

订单 服务人员 预约系统 首页 用户 订单 服务人员 预约系统 首页 用户 浏览服务分类 选择服务 展示服务人员 选择服务人员 选择预约时间 提交预约 推送订单 确认接单 创建订单 订单通知 上门服务 确认完成 服务评价

三、核心模块设计

3.1 数据模型设计

3.1.1 服务分类枚举 (ServiceCategory)
dart 复制代码 
enum ServiceCategory {
  cleaning(label: '保洁清洗', emoji: '🧹'),
  nanny(label: '月嫂保姆', emoji: '👶'),
  repair(label: '家电维修', emoji: '🔧'),
  plumbing(label: '管道疏通', emoji: '🚿'),
  moving(label: '搬家服务', emoji: '📦'),
  other(label: '其他服务', emoji: '🏠');

  final String label;
  final String emoji;
}
3.1.2 订单状态枚举 (OrderStatus)
dart 复制代码 
enum OrderStatus {
  pending(label: '待确认', emoji: '⏳'),
  confirmed(label: '已确认', emoji: '✅'),
  inService(label: '服务中', emoji: '🔨'),
  completed(label: '已完成', emoji: '🎉'),
  cancelled(label: '已取消', emoji: '❌'),
  toReview(label: '待评价', emoji: '⭐');

  final String label;
  final String emoji;
}
3.1.3 服务模型 (Service)
dart 复制代码 
class Service {
  final String id;              // 服务ID
  final String name;            // 服务名称
  final ServiceCategory category; // 所属分类
  final double price;           // 单价
  final String unit;            // 单位
  final String description;     // 服务描述
  final int duration;           // 预计时长（分钟）
}
3.1.4 服务人员模型 (Worker)
dart 复制代码 
class Worker {
  final String id;              // 人员ID
  final String name;            // 姓名
  final String avatar;          // 头像
  final WorkerLevel level;      // 等级
  final List<ServiceCategory> skills; // 技能
  final double rating;          // 评分
  final int orderCount;         // 订单数
  final String introduction;    // 简介
}
3.1.5 订单模型 (Order)
dart 复制代码 
class Order {
  final String id;              // 订单ID
  final Service service;        // 服务信息
  final Worker worker;          // 服务人员
  OrderStatus status;           // 订单状态
  final DateTime scheduledTime; // 预约时间
  final String address;         // 服务地址
  final double amount;          // 金额
  String? review;               // 评价内容
  double? rating;               // 评分
}
3.1.6 服务分类分布

35% 20% 15% 12% 10% 8% 服务分类订单分布示例 保洁清洗 家电维修 月嫂保姆 管道疏通 搬家服务 其他服务

3.2 页面结构设计

3.2.1 主页面布局

HousekeepingServiceHomePage
IndexedStack
首页
订单页
消息页
个人中心页
NavigationBar
首页 Tab
订单 Tab
消息 Tab
我的 Tab

3.2.2 首页结构

首页
SliverAppBar
搜索栏
分类导航
热门服务
推荐人员
分类图标
分类名称
服务卡片
服务名称
服务价格
预约按钮
人员卡片
头像姓名
等级评分
技能标签

3.2.3 订单页结构

订单页
AppBar
状态筛选
订单列表
全部
待确认
服务中
已完成
订单卡片
服务信息
人员信息
预约时间
订单状态
操作按钮

3.2.4 消息页结构

消息页
AppBar
消息列表
消息项
消息图标
消息标题
消息摘要
时间标记
未读标记

3.3 订单状态流转

提交预约
服务商接单
用户取消
开始服务
用户取消
服务完成
用户评价
待确认
已确认
已取消
服务中
待评价
已完成

3.4 服务人员匹配逻辑

是
否
选择服务
获取服务分类
筛选技能匹配人员
按等级排序
按评分排序
展示推荐列表
用户选择?
确认预约
查看更多

四、UI设计规范

4.1 设计原则

原则 说明
专业可信 界面整洁，信息清晰可靠
操作便捷 预约流程简单，减少步骤
温馨舒适 色彩柔和，符合家政主题
信息透明 价格、人员信息一目了然

4.2 色彩规范

颜色类型 色值 用途
主色 #9C27B0 强调、按钮
辅助色 #FF9800 优惠、提醒
背景色 #FAFAFA 页面背景
卡片色 #FFFFFF 卡片背景
文字色 #333333 主要文字
次要文字 #666666 次要文字
禁用色 #CCCCCC 禁用状态

4.3 字体规范

字体类型 字号 字重 用途
大标题 24 Bold 页面标题
标题 18 Bold 模块标题
正文 14 Regular 正文内容
辅助文字 12 Regular 辅助说明
价格 16 Bold 价格显示

4.4 间距规范

间距类型 数值 用途
页面边距 16 页面四周
模块间距 24 模块之间
元素间距 8 元素之间
内边距 12 卡片内部

五、功能模块详解

5.1 首页模块

5.1.1 搜索功能

是
否
输入关键词
实时搜索
显示结果
有结果?
展示服务/人员
显示空状态

5.1.2 分类导航
  • 横向滚动的分类图标
  • 点击分类筛选服务
  • 当前分类高亮显示
5.1.3 服务展示
  • 网格布局展示服务
  • 卡片包含图标、名称、价格
  • 支持快速预约

5.2 订单模块

5.2.1 订单列表
  • 按状态筛选订单
  • 显示订单基本信息
  • 支持订单操作
5.2.2 订单详情
  • 服务信息明细
  • 服务人员信息
  • 预约时间地址
  • 操作按钮
5.2.3 评价功能

点击评价
评分选择
输入评价
提交评价
订单完成

5.3 消息模块

5.3.1 消息类型
  • 订单通知：订单状态变更
  • 系统消息：平台公告
  • 活动推送：优惠活动
5.3.2 消息管理
  • 未读标记
  • 一键已读
  • 消息删除

5.4 个人中心模块

5.4.1 个人信息
  • 头像昵称
  • 联系方式
  • 实名认证
5.4.2 其他功能
  • 地址管理
  • 收藏服务人员
  • 历史订单
  • 设置

六、数据统计

6.1 订单状态分布

50% 15% 12% 10% 8% 5% 订单状态分布 已完成 待评价 服务中 已确认 待确认 已取消

6.2 服务时段分布

渲染错误: Mermaid 渲染失败: Cannot read properties of undefined (reading 'endTime')

七、开发计划

7.1 阶段规划

2026-04-01 2026-04-02 2026-04-03 2026-04-04 2026-04-05 2026-04-06 2026-04-07 2026-04-08 2026-04-09 2026-04-10 2026-04-11 项目搭建 数据模型 首页开发 订单功能 消息功能 个人中心 UI优化 测试调试 基础功能 核心功能 优化完善 开发计划

7.2 功能清单

优先级 功能模块 功能点 状态
P0 首页 服务浏览 已完成
P0 首页 分类筛选 已完成
P0 订单 预约下单 已完成
P0 订单 订单管理 已完成
P1 订单 服务评价 已完成
P1 消息 消息通知 已完成
P2 个人中心 地址管理 已完成
P2 个人中心 收藏功能 待开发

八、总结

家政服务预约平台采用Flutter框架开发，遵循Material Design 3设计规范，实现了完整的家政服务预约流程。应用涵盖服务浏览、在线预约、订单管理、服务评价等核心功能，为用户提供便捷的家政服务体验。

通过枚举类型定义服务分类和订单状态，确保数据的一致性和可维护性。采用setState进行状态管理，实现订单和消息的实时更新。界面设计专业可信，操作流程顺畅，符合用户使用习惯。

相关推荐
唔662 小时前
flutter TextTheme 手机端适配验证
flutter·智能手机
Ww.xh2 小时前
Flutter配置Gradle完整教程
flutter·gradle·android studio
彧翎Pro2 小时前
跨平台开发新选择：Flutter与React Native深度对比
flutter·react native·react.js
autumn20052 小时前
Flutter 框架跨平台鸿蒙开发 - 本地商超优惠推送
flutter·华为·harmonyos
牛马1112 小时前
Flutter BackdropFilter
flutter
autumn20052 小时前
Flutter 框架跨平台鸿蒙开发 - 互助服务
flutter·华为·harmonyos
AI_零食3 小时前
Flutter 框架跨平台鸿蒙开发 - 时间压缩器应用
flutter·华为·架构·开源·harmonyos·鸿蒙
想你依然心痛3 小时前
HarmonyOS 5.0 IoT开发实战：构建分布式智能设备控制中枢与边缘计算网关
分布式·物联网·harmonyos
不爱吃糖的程序媛3 小时前
Flutter三方库鸿蒙化适配：5种高效检查方式，快速判断是否需要适配
flutter·华为·harmonyos
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Oh My Codex 快速使用指南07AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了