Flutter 框架跨平台鸿蒙开发 - 邻里互助服务平台

邻里互助服务平台应用


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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

邻里互助服务平台是一款社交创新类应用,致力于构建温暖的社区互助网络。居民可以在平台上发布求助信息,如修水管、换灯泡、搬家帮忙等,邻居们可以选择付费服务或用技能交换的方式提供帮助。通过互助服务,增进邻里感情,营造和谐社区氛围。

应用以温暖的绿色为主色调,象征互助与希望。涵盖求助大厅、我的接单、互助记录、个人中心四大模块。用户可以发布求助、接单帮助、查看记录、管理个人档案,实现社区互助的全流程管理。

1.2 核心功能

功能模块 功能描述 实现方式
求助发布 发布各类服务求助 表单输入
接单帮助 接受邻居的求助 一键接单
服务交换 用技能换技能 交换匹配
付费服务 现金支付服务费用 预算设置
评价系统 服务完成后互评 星级评分
积分体系 互助积分奖励机制 积分累计

1.3 服务类型定义

序号 服务名称 Emoji 颜色代码 描述
1 水电维修 🔧 #2196F3 水管、电路等
2 电器修理 🔌 #FF9800 家电维修
3 家政清洁 🧹 #4CAF50 打扫卫生
4 搬运帮忙 📦 #9C27B0 搬家协助
5 园艺养护 🌱 #8BC34A 花草养护
6 宠物照看 🐕 #E91E63 宠物寄养
7 儿童看护 👶 #00BCD4 临时照看
8 老人陪护 👴 #795548 陪伴照顾
9 家教辅导 📚 #673AB7 学业辅导
10 烹饪帮忙 🍳 #F44336 做饭协助
11 IT支持 💻 #009688 电脑手机
12 其他服务 🌟 #607D8B 其他帮助

1.4 交换方式定义

序号 方式名称 Emoji 描述
1 付费服务 💰 现金支付
2 服务交换 🤝 用技能换技能
3 均可 🔄 付费或交换

1.5 请求状态定义

序号 状态名称 Emoji 颜色代码 描述
1 待接单 📢 #FF9800 等待帮助
2 已接单 #4CAF50 已有人接单
3 进行中 🔄 #2196F3 服务进行中
4 已完成 🎉 #8BC34A 服务完成
5 已取消 #9E9E9E 请求取消

1.6 紧急程度定义

序号 程度名称 Emoji 数值 描述
1 普通 📅 1 正常安排
2 紧急 2 需要尽快
3 非常紧急 🚨 3 立即处理

1.7 技术栈

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

1.8 项目结构

复制代码
lib/
└── main_neighbor_help.dart
    ├── NeighborHelpApp              # 应用入口
    ├── ServiceType                  # 服务类型枚举
    ├── ExchangeMode                 # 交换方式枚举
    ├── RequestStatus                # 请求状态枚举
    ├── UrgencyLevel                 # 紧急程度枚举
    ├── UserProfile                  # 用户档案模型
    ├── ServiceRequest               # 服务请求模型
    ├── ServiceRecord                # 服务记录模型
    ├── NeighborHelpHomePage         # 主页面(底部导航)
    ├── _buildRequestsPage           # 求助大厅页
    ├── _buildMyServicesPage         # 我的接单页
    ├── _buildRecordsPage            # 互助记录页
    └── _buildProfilePage            # 个人中心页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

NeighborHelpHomePage
求助大厅
我的接单
互助记录
个人中心
求助列表
筛选功能
接单操作
进行中服务
服务状态
历史记录
评价查看
个人档案
技能管理
成就徽章
请求管理器

RequestManager
匹配引擎

MatchingEngine
评价系统

RatingSystem
ServiceRequest

服务请求
UserProfile

用户档案
ServiceRecord

服务记录
ServiceType

服务类型

2.2 类图设计

has
has
has
requester/provider
references
NeighborHelpApp
+Widget build()
<<enumeration>>
ServiceType
+String label
+String icon
+Color color
+plumbing()
+electrical()
+cleaning()
+moving()
+gardening()
+petcare()
<<enumeration>>
ExchangeMode
+String label
+String icon
+String description
+paid()
+exchange()
+both()
<<enumeration>>
RequestStatus
+String label
+String icon
+Color color
+open()
+accepted()
+inProgress()
+completed()
+cancelled()
UserProfile
+String id
+String name
+String avatar
+String building
+String unit
+double rating
+int helpCount
+int thanksCount
+List skills
+int creditPoints
ServiceRequest
+String id
+String title
+String description
+ServiceType type
+ExchangeMode mode
+RequestStatus status
+UrgencyLevel urgency
+UserProfile requester
+UserProfile provider
+double budget
+String exchangeSkill
ServiceRecord
+String id
+ServiceRequest request
+DateTime completedAt
+int rating
+String comment
+bool isPaid
+double amount

2.3 页面导航流程

大厅
接单
记录
中心
应用启动
求助大厅
底部导航
浏览求助
我的服务
互助记录
个人档案
筛选求助
查看详情
接单确认
开始服务
完成服务
评价打分
编辑技能
查看成就

2.4 服务交换流程

帮助者 平台 求助者 帮助者 平台 求助者 发布求助(服务交换) 匹配有相关技能的邻居 推送求助信息 接单(选择交换技能) 通知接单信息 确认交换 开始服务 完成服务 提供交换服务 评价打分 评价打分 更新双方积分


三、核心模块设计

3.1 数据模型设计

3.1.1 服务类型枚举 (ServiceType)
dart 复制代码
enum ServiceType {
  plumbing('水电维修', '🔧', Color(0xFF2196F3)),
  electrical('电器修理', '🔌', Color(0xFFFF9800)),
  cleaning('家政清洁', '🧹', Color(0xFF4CAF50)),
  moving('搬运帮忙', '📦', Color(0xFF9C27B0)),
  gardening('园艺养护', '🌱', Color(0xFF8BC34A)),
  petcare('宠物照看', '🐕', Color(0xFFE91E63)),
  childcare('儿童看护', '👶', Color(0xFF00BCD4)),
  elderly('老人陪护', '👴', Color(0xFF795548)),
  tutoring('家教辅导', '📚', Color(0xFF673AB7)),
  cooking('烹饪帮忙', '🍳', Color(0xFFF44336)),
  it('IT支持', '💻', Color(0xFF009688)),
  other('其他服务', '🌟', Color(0xFF607D8B));

  final String label;
  final String icon;
  final Color color;
}
3.1.2 交换方式枚举 (ExchangeMode)
dart 复制代码
enum ExchangeMode {
  paid('付费服务', '💰', '现金支付'),
  exchange('服务交换', '🤝', '用技能换技能'),
  both('均可', '🔄', '付费或交换');

  final String label;
  final String icon;
  final String description;
}
3.1.3 用户档案模型 (UserProfile)
dart 复制代码
class UserProfile {
  final String id;              // 用户ID
  final String name;            // 姓名
  final String avatar;          // 头像
  final String building;        // 楼栋
  final String unit;            // 单元
  final double rating;          // 评分
  final int helpCount;          // 帮助次数
  final int thanksCount;        // 感谢次数
  final List<String> skills;    // 技能列表
  final int creditPoints;       // 积分
}
3.1.4 服务请求模型 (ServiceRequest)
dart 复制代码
class ServiceRequest {
  final String id;              // 请求ID
  final String title;           // 标题
  final String description;     // 描述
  final ServiceType type;       // 服务类型
  final ExchangeMode mode;      // 交换方式
  final RequestStatus status;   // 状态
  final UrgencyLevel urgency;   // 紧急程度
  final UserProfile requester;  // 求助者
  final UserProfile? provider;  // 帮助者
  final String building;        // 楼栋
  final String unit;            // 单元
  final DateTime createdAt;     // 创建时间
  final DateTime? preferredTime;// 期望时间
  final double? budget;         // 预算
  final String? exchangeSkill;  // 交换技能
  final List<String> images;    // 图片
}
3.1.5 服务类型分布

25% 20% 18% 15% 12% 10% 服务类型分布示例 水电维修 家政清洁 搬运帮忙 宠物照看 电器修理 其他服务

3.2 页面结构设计

3.2.1 主页面布局

NeighborHelpHomePage
IndexedStack
求助大厅页
我的接单页
互助记录页
个人中心页
NavigationBar
大厅 Tab
接单 Tab
记录 Tab
中心 Tab

3.2.2 求助大厅页结构

求助大厅页
统计头部
筛选栏
求助列表
求助卡片
标题与紧急度
描述内容
服务类型标签
交换方式标签
求助者信息
预算/交换技能
操作按钮

3.2.3 求助卡片结构

求助卡片
标题行
描述
标签行
用户行
操作行
标题文本
紧急度标签
服务类型
交换方式
用户头像
用户名/地址
预算金额/交换技能
联系按钮
我来帮按钮

3.2.4 个人中心页结构

个人中心页
用户档案卡
技能标签
成就徽章
设置列表
头像
姓名/地址
评分
统计数据

3.3 服务匹配逻辑

付费
交换
均可


发布求助
交换方式
推送给附近邻居
匹配有对应技能者
两种方式都推送
邻居查看
技能匹配算法
是否接单
确认接单
继续浏览
开始服务流程

3.4 积分计算逻辑

5星
4星
3星
2星以下
完成服务
获取基础积分
服务评价
积分 × 1.5
积分 × 1.2
积分 × 1.0
积分 × 0.5
累加到用户积分
检查成就解锁
更新成就状态


四、UI设计规范

4.1 配色方案

应用以温暖的绿色为主色调,象征互助与希望:

颜色类型 色值 用途
主色 #43A047 (Green) 导航、主题元素
辅助色 #2E7D32 卡片背景
第三色 #1B5E20 页面背景
强调色 #66BB6A 进度条
背景色 #1B5E20 页面背景
卡片背景 #2E7D32 统计卡片

4.2 服务类型颜色规范

服务类型 色值 视觉效果
水电维修 #2196F3 蓝色
电器修理 #FF9800 橙色
家政清洁 #4CAF50 绿色
搬运帮忙 #9C27B0 紫色
园艺养护 #8BC34A 浅绿
宠物照看 #E91E63 粉色
儿童看护 #00BCD4 青色
老人陪护 #795548 棕色
家教辅导 #673AB7 深紫
烹饪帮忙 #F44336 红色
IT支持 #009688 青绿
其他服务 #607D8B 灰蓝

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 白色
求助标题 16px Bold 白色
用户名 14px Medium 白色
描述文字 13px Regular 白色70%
标签文字 11px Regular 白色

4.4 组件规范

4.4.1 求助卡片
复制代码
┌─────────────────────────────────────┐
│  厨房水龙头漏水            ⚡ 紧急  │
│  厨房水龙头漏水严重,需要帮忙...    │
│  ┌────────┐ ┌────────┐              │
│  │🔧水电维修│ │💰付费服务│            │
│  └────────┘ └────────┘              │
│  👨‍🔧 张师傅  A栋805      ¥100       │
│              联系  [我来帮]         │
└─────────────────────────────────────┘
4.4.2 用户档案卡
复制代码
┌─────────────────────────────────────┐
│            😊                       │
│         热心邻居                     │
│         A栋 1201                    │
│            ⭐ 4.8                   │
│  ┌─────┬─────┬─────┐               │
│  │🤝   │🙏   │⭐   │               │
│  │15   │23   │580  │               │
│  │帮助 │感谢 │积分 │               │
│  └─────┴─────┴─────┘               │
└─────────────────────────────────────┘
4.4.3 服务记录卡
复制代码
┌─────────────────────────────────────┐
│  厨房水龙头漏水         ⭐⭐⭐⭐⭐    │
│  张师傅技术很好,很快就修好了!      │
│  🔧 水电维修  💰 ¥100      3/15     │
└─────────────────────────────────────┘
4.4.4 成就徽章项
复制代码
┌─────────────────────────────────────┐
│  🏆 热心邻居                    ✓   │
│      帮助10位邻居                   │
└─────────────────────────────────────┘

五、核心功能实现

5.1 求助发布实现

dart 复制代码
void _publishRequest() {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Row(
        children: [
          Icon(Icons.add_circle, color: Colors.lightGreenAccent),
          SizedBox(width: 8),
          Text('发布求助'),
        ],
      ),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(decoration: InputDecoration(hintText: '求助标题')),
          DropdownButtonFormField<ServiceType>(
            decoration: InputDecoration(hintText: '服务类型'),
            items: ServiceType.values.map((t) => 
              DropdownMenuItem(value: t, child: Text('${t.icon} ${t.label}'))
            ).toList(),
            onChanged: (value) {},
          ),
          DropdownButtonFormField<ExchangeMode>(
            decoration: InputDecoration(hintText: '交换方式'),
            items: ExchangeMode.values.map((m) => 
              DropdownMenuItem(value: m, child: Text('${m.icon} ${m.label}'))
            ).toList(),
            onChanged: (value) {},
          ),
        ],
      ),
    ),
  );
}

5.2 接单确认实现

dart 复制代码
void _acceptRequest(ServiceRequest request) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Row(
        children: [
          Icon(Icons.volunteer_activism, color: Colors.lightGreenAccent),
          SizedBox(width: 8),
          Text('接单确认'),
        ],
      ),
      content: Column(
        children: [
          Text('确定要接受这个求助吗?'),
          Container(
            child: Column(
              children: [
                Text(request.title),
                Text('${request.type.icon} ${request.type.label}'),
                Text('${request.mode.icon} ${request.mode.label}'),
                if (request.budget != null) Text('预算: ¥${request.budget}'),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

5.3 积分计算公式

基础积分计算:

Pointsbase=ServiceTypeweight×Urgencyfactor Points_{base} = ServiceType_{weight} \times Urgency_{factor} Pointsbase=ServiceTypeweight×Urgencyfactor

评价加成计算:

Pointsfinal=Pointsbase×Ratingmultiplier Points_{final} = Points_{base} \times Rating_{multiplier} Pointsfinal=Pointsbase×Ratingmultiplier

其中评价乘数:

Ratingmultiplier={1.5if Rating=51.2if Rating=41.0if Rating=30.5if Rating≤2 Rating_{multiplier} = \begin{cases} 1.5 & \text{if } Rating = 5 \\ 1.2 & \text{if } Rating = 4 \\ 1.0 & \text{if } Rating = 3 \\ 0.5 & \text{if } Rating \leq 2 \end{cases} Ratingmultiplier=⎩ ⎨ ⎧1.51.21.00.5if Rating=5if Rating=4if Rating=3if Rating≤2

5.4 技能匹配算法

dart 复制代码
double calculateMatchScore(UserProfile provider, ServiceRequest request) {
  double score = 0;
  
  // 技能匹配
  if (provider.skills.contains(request.type.label)) {
    score += 40;
  }
  
  // 距离因素
  if (provider.building == request.building) {
    score += 30;
  }
  
  // 评分因素
  score += provider.rating * 10;
  
  // 历史帮助次数
  score += min(provider.helpCount, 20);
  
  return score;
}

六、交互设计

6.1 发布求助流程

邻居 平台 发布弹窗 用户 邻居 平台 发布弹窗 用户 点击发布求助 显示表单 填写求助信息 选择服务类型 选择交换方式 提交求助 匹配合适邻居 推送求助通知 接单响应

6.2 服务完成流程

付费
交换
开始服务
服务进行中
点击完成
确认完成
交换方式
支付结算
记录交换服务
双方评价
更新积分
检查成就
完成

6.3 评价流程

服务完成
评价页面
星级选择
文字评价
提交评价
积分更新


七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 2024-04-14 2024-04-21 基础UI框架 求助发布 接单功能 实时聊天 支付集成 推送通知 社区活动 志愿者认证 数据统计 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 邻里互助服务平台开发计划

7.2 功能扩展建议

7.2.1 实时聊天

聊天功能:

  • 即时通讯
  • 图片发送
  • 语音消息
  • 服务进度更新
7.2.2 支付集成

支付功能:

  • 微信/支付宝支付
  • 押金托管
  • 自动结算
  • 发票开具
7.2.3 社区活动

活动功能:

  • 社区活动发布
  • 志愿者招募
  • 积分兑换
  • 公益服务

八、注意事项

8.1 开发注意事项

  1. 隐私保护:用户地址信息需脱敏处理

  2. 安全验证:服务提供者需实名认证

  3. 评价公正:评价需双方完成后才公开

  4. 积分防刷:积分获取需有防刷机制

  5. 纠纷处理:需建立投诉和仲裁机制

8.2 常见问题

问题 原因 解决方案
匹配不准确 技能标签不完善 优化匹配算法
接单后失联 无强制机制 添加超时取消
评价不真实 恶意评价 评价审核机制
积分异常 系统漏洞 积分日志追踪
地址泄露 显示完整地址 脱敏显示

8.3 使用技巧

🤝 邻里互助服务技巧 🤝

求助发布建议

  • 描述详细具体,便于匹配
  • 合理设置预算或交换条件
  • 选择合适的紧急程度
  • 上传相关图片辅助说明

服务提供建议

  • 接单前确认服务内容
  • 准时到达服务地点
  • 保持良好服务态度
  • 完成后主动请求评价

积分获取技巧

  • 积极响应紧急求助
  • 提供高质量服务获好评
  • 连续活跃获取额外奖励
  • 参与社区活动赢积分

九、运行说明

9.1 环境要求

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

9.2 运行命令

bash 复制代码
# 查看可用设备
flutter devices

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

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

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

十、总结

邻里互助服务平台通过求助大厅、我的接单、互助记录、个人中心四大模块,为社区居民提供了一个便捷的互助服务平台。应用支持12种服务类型、3种交换方式、5种请求状态,帮助邻居们通过付费或技能交换的方式互相帮助,增进邻里感情。

核心功能涵盖求助发布、接单帮助、服务交换、付费服务四大模块。求助发布支持详细描述服务需求;接单帮助支持一键接单和状态追踪;服务交换实现了技能互换的创新模式;付费服务提供了灵活的预算设置。评价系统和积分体系激励用户积极参与互助。

应用采用 Material Design 3 设计规范,以温暖的绿色为主色调,象征互助与希望。通过本应用,希望能够构建温暖的社区互助网络,让邻里之间互帮互助,共同营造和谐社区氛围。

邻里互助服务平台------温暖邻里,互助友爱


相关推荐
提子拌饭1332 小时前
3D 旋转卡片:鸿蒙Flutter 实现的交互式 3D 卡片效果
flutter·华为·harmonyos·鸿蒙
提子拌饭1332 小时前
星芒便签:鸿蒙Flutter框架 实现的美观便签应用
flutter·华为·架构·开源·harmonyos·鸿蒙
一直在想名2 小时前
Flutter 框架跨平台鸿蒙开发 - 亲子故事共创
flutter·华为·harmonyos
2401_839633912 小时前
Flutter 框架跨平台鸿蒙开发 - 声音密码锁
服务器·flutter·华为·harmonyos
Utopia^2 小时前
Flutter 框架跨平台鸿蒙开发 - 知识卡片整理
flutter·华为·harmonyos
@不误正业2 小时前
第04章-开源鸿蒙的架构概览
架构·开源·harmonyos
独特的螺狮粉2 小时前
开源鸿蒙跨平台Flutter开发:近视防控数字疗法:基于 Flutter 的眼动物理追踪与睫状肌动力学舒缓测绘架构
flutter·华为·架构·开源·harmonyos·鸿蒙
Swift社区2 小时前
ArkUI 的核心语法,一篇文章讲清楚
harmonyos·arkui
世人万千丶2 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭健康档案云应用
学习·flutter·华为·开源·harmonyos·鸿蒙