社区闲置循环应用
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图





1.1 应用简介
社区闲置循环是一款生活服务类应用,致力于社区内物品交换赠送、邻里互助,让闲置物品流动起来,实现环保又实惠的生活方式。通过平台,居民可以发布闲置物品、寻求邻里帮助,构建温馨互助的社区生态。
应用核心理念:让闲置流动起来,邻里互助,共建绿色社区。
在消费主义盛行的今天,每个家庭都有大量闲置物品。社区闲置循环平台让这些物品重新焕发价值,既减少资源浪费,又增进邻里感情,实现环保与实惠的双赢。
1.2 核心功能
| 功能模块 |
功能描述 |
实现方式 |
| 闲置发布 |
发布闲置物品信息 |
表单输入 |
| 物品浏览 |
浏览社区闲置物品 |
列表展示 |
| 分类筛选 |
按类型筛选物品 |
分类标签 |
| 邻里互助 |
发布和响应互助请求 |
请求列表 |
| 交易记录 |
查看历史交易记录 |
列表展示 |
| 个人中心 |
管理个人信息和发布 |
个人页面 |
1.3 物品分类
| 序号 |
分类 |
Emoji |
描述 |
| 1 |
家具 |
🪑 |
桌椅沙发柜子等 |
| 2 |
电器 |
📺 |
家电数码产品 |
| 3 |
衣物 |
👕 |
服装鞋帽配饰 |
| 4 |
书籍 |
📚 |
图书杂志教材 |
| 5 |
玩具 |
🧸 |
儿童玩具益智 |
| 6 |
厨具 |
🍳 |
厨房用品餐具 |
| 7 |
运动 |
⚽ |
运动健身器材 |
| 8 |
其他 |
📦 |
其他闲置物品 |
1.4 发布类型
| 类型 |
Emoji |
描述 |
颜色 |
| 赠送 |
🎁 |
免费赠送给邻居 |
绿色 |
| 交换 |
🔄 |
用闲置换闲置 |
蓝色 |
| 借用 |
🤝 |
临时借给邻居 |
橙色 |
1.5 物品状态
| 状态 |
Emoji |
描述 |
颜色 |
| 可用 |
✅ |
物品可领取/交换 |
绿色 |
| 已预约 |
📌 |
已被他人预约 |
橙色 |
| 已完成 |
🎉 |
交易已完成 |
灰色 |
1.6 互助类型
| 类型 |
Emoji |
描述 |
| 借工具 |
🔧 |
借用工具 |
| 宠物照看 |
🐕 |
帮忙照看宠物 |
| 植物浇水 |
🌱 |
帮忙浇花 |
| 代收快递 |
📦 |
帮忙收快递 |
| 其他帮助 |
🤝 |
其他互助 |
1.7 技术栈
| 技术领域 |
技术选型 |
版本要求 |
| 开发框架 |
Flutter |
>= 3.0.0 |
| 编程语言 |
Dart |
>= 2.17.0 |
| 设计规范 |
Material Design 3 |
- |
| 状态管理 |
setState |
- |
| 导航控制 |
TabController |
- |
| 目标平台 |
鸿蒙OS / Web |
API 21+ |
二、项目结构
lib/
├── main_community_exchange.dart # 应用主入口(~950行)
│ ├── CommunityExchangeApp # 根应用组件
│ ├── ItemCategory # 物品分类枚举
│ ├── ItemType # 发布类型枚举
│ ├── ItemStatus # 物品状态枚举
│ ├── HelpType # 互助类型枚举
│ ├── ExchangeItem # 闲置物品模型
│ ├── HelpRequest # 互助请求模型
│ ├── Transaction # 交易记录模型
│ └── CommunityExchangeHomePage # 主页面
三、数据模型
3.1 物品分类枚举 (ItemCategory)
enum ItemCategory {
furniture('家具', '🪑', '桌椅沙发柜子等'),
electronics('电器', '📺', '家电数码产品'),
clothing('衣物', '👕', '服装鞋帽配饰'),
books('书籍', '📚', '图书杂志教材'),
toys('玩具', '🧸', '儿童玩具益智'),
kitchen('厨具', '🍳', '厨房用品餐具'),
sports('运动', '⚽', '运动健身器材'),
other('其他', '📦', '其他闲置物品');
final String label;
final String icon;
final String description;
}
3.2 发布类型枚举 (ItemType)
enum ItemType {
give('赠送', '🎁', '免费赠送给邻居', Color(0xFF4CAF50)),
exchange('交换', '🔄', '用闲置换闲置', Color(0xFF2196F3)),
borrow('借用', '🤝', '临时借给邻居', Color(0xFFFF9800));
final String label;
final String icon;
final String description;
final Color color;
}
3.3 闲置物品模型 (ExchangeItem)
class ExchangeItem {
final String id;
final String title;
final String description;
final ItemCategory category;
final ItemType type;
final ItemStatus status;
final String ownerName;
final String ownerAvatar;
final String community;
final double distance;
final DateTime createdAt;
final List<String> images;
final int viewCount;
final int likeCount;
final String? exchangeWish;
}
3.4 互助请求模型 (HelpRequest)
class HelpRequest {
final String id;
final String title;
final HelpType type;
final String description;
final String requesterName;
final String requesterAvatar;
final String community;
final DateTime createdAt;
final DateTime? deadline;
final bool isUrgent;
final int helperCount;
}
3.5 交易记录模型 (Transaction)
class Transaction {
final String id;
final ExchangeItem item;
final String fromUser;
final String toUser;
final DateTime completedAt;
final String? review;
}
3.6 数据流转图
四、核心功能实现
4.1 发布闲置物品
void _publishItem() {
if (_titleController.text.isEmpty) return;
setState(() {
_items.insert(
0,
ExchangeItem(
id: DateTime.now().millisecondsSinceEpoch.toString(),
title: _titleController.text,
description: _descController.text,
category: _selectedCategory,
type: _selectedType,
status: ItemStatus.available,
ownerName: '我',
ownerAvatar: '😊',
community: '阳光花园',
distance: 0.0,
createdAt: DateTime.now(),
images: [],
exchangeWish: _wishController.text.isEmpty ? null : _wishController.text,
),
);
});
_titleController.clear();
_descController.clear();
_wishController.clear();
}
4.2 物品详情展示
void _showItemDetail(ExchangeItem item) {
showModalBottomSheet(
context: context,
builder: (context) => Column(
children: [
Container(height: 200, child: ImageWidget()),
Text(item.title),
Text(item.description),
if (item.exchangeWish != null)
Text('希望交换: ${item.exchangeWish}'),
Row(children: [
CircleAvatar(child: Text(item.ownerAvatar)),
Text(item.ownerName),
Text('${item.distance}km'),
]),
Row(children: [
OutlinedButton(child: Text('联系TA')),
ElevatedButton(child: Text('我要领取')),
]),
],
),
);
}
4.3 分类筛选
Widget _buildCategoryFilter() {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
_buildCategoryChip('全部', '📦', true),
...ItemCategory.values.map((cat) =>
_buildCategoryChip(cat.label, cat.icon, false)
),
],
),
);
}
4.4 邻里互助功能
Widget _buildHelpCard(HelpRequest request) {
return Container(
child: Row(
children: [
Container(child: Text(request.type.icon)),
Column(
children: [
Text(request.title),
Text(request.description),
if (request.isUrgent) Text('急'),
],
),
ElevatedButton(
onPressed: () => _helpRequest(request),
child: Text('帮忙'),
),
],
),
);
}
五、环保价值分析
5.1 环保效益
5.2 环保指标计算
| 指标 |
计算方式 |
单位 |
| 减碳量 |
物品重量 × 系数 |
kg CO₂ |
| 节约资源 |
物品价值 × 比例 |
元 |
| 延长寿命 |
原寿命 × 延长比例 |
年 |
5.3 社区价值
| 价值维度 |
描述 |
| 经济价值 |
免费获取闲置物品,节省开支 |
| 社交价值 |
增进邻里交流,构建社区关系 |
| 环保价值 |
减少浪费,促进资源循环 |
| 教育价值 |
培养环保意识,传递公益理念 |
六、UI设计
6.1 色彩系统
应用以绿色为主色调,象征环保与生机:
| 颜色类型 |
色值 |
用途 |
| 背景渐变1 |
#1B5E20 |
深绿 |
| 背景渐变2 |
#2E7D32 |
中绿 |
| 背景渐变3 |
#388E3C |
浅绿 |
| 主色调 |
#43A047 |
绿色 |
| 强调色 |
#66BB6A |
浅绿 |
| 文字主色 |
#FFFFFF |
白色 |
6.2 类型配色
| 类型 |
颜色 |
色值 |
意象 |
| 赠送 |
绿色 |
#4CAF50 |
无偿分享 |
| 交换 |
蓝色 |
#2196F3 |
公平交换 |
| 借用 |
橙色 |
#FF9800 |
临时借用 |
6.3 页面结构
┌─────────────────────────────────────┐
│ ♻️ 社区闲置循环 🔍 │ ← 标题栏
│ 让闲置流动起来,环保又实惠 │
├─────────────────────────────────────┤
│ [闲置物品] [邻里互助] [交易记录] [我的]│
├─────────────────────────────────────┤
│ [📦全部] [🪑家具] [📺电器] [👕衣物]...│ ← 分类筛选
├─────────────────────────────────────┤
│ [🎁赠送] [🔄交换] [🤝借用] │ ← 类型筛选
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🧸 九成新儿童自行车 [🎁赠送]│ │
│ │ 孩子长大了,自行车闲置... │ ← 物品卡片
│ │ 👩王阿姨 · 阳光花园 · 0.3km │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 📚 全套考研资料 [🔄交换]│ │
│ │ 2024年考研全套资料... │ │
│ │ 👨小李 · 翠湖小区 · 0.8km │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ [+] 发布 │ ← 浮动按钮
└─────────────────────────────────────┘
6.4 发布页面结构
┌─────────────────────────────────────┐
│ 发布闲置 ✕ │
├─────────────────────────────────────┤
│ 物品名称 │
│ ┌─────────────────────────────┐ │
│ │ 九成新儿童自行车 │ ← 输入框
│ └─────────────────────────────┘ │
│ 物品描述 │
│ ┌─────────────────────────────┐ │
│ │ 孩子长大了,自行车闲置... │ │
│ │ │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ 物品分类 │
│ [🪑家具] [📺电器] [👕衣物] ... │ ← 分类选择
├─────────────────────────────────────┤
│ 发布类型 │
│ [🎁赠送] [🔄交换] [🤝借用] │ ← 类型选择
├─────────────────────────────────────┤
│ 希望交换什么(交换时填写) │
│ ┌─────────────────────────────┐ │
│ │ 编程类书籍 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ [ 发布 ] │ ← 发布按钮
└─────────────────────────────────────┘
6.5 交互设计
| 交互元素 |
触发方式 |
响应行为 |
| 物品卡片 |
点击 |
显示物品详情 |
| 分类标签 |
点击 |
筛选分类 |
| 发布按钮 |
点击 |
打开发布弹窗 |
| 联系TA |
点击 |
联系发布者 |
| 我要领取 |
点击 |
申请领取物品 |
| 帮忙按钮 |
点击 |
响应互助请求 |
七、状态管理
7.1 状态分类
| 状态类型 |
状态名称 |
说明 |
| 物品列表 |
_items |
所有闲置物品 |
| 互助列表 |
_helpRequests |
互助请求列表 |
| 交易记录 |
_transactions |
历史交易记录 |
| 选中分类 |
_selectedCategory |
当前选择的分类 |
| 选中类型 |
_selectedType |
当前选择的类型 |
| 输入控制器 |
_titleController |
物品名称输入 |
| 输入控制器 |
_descController |
物品描述输入 |
| 输入控制器 |
_wishController |
交换意愿输入 |
7.2 状态流转
7.3 交易流程图
八、邻里互助系统
8.1 互助类型详解
| 类型 |
适用场景 |
响应时间 |
| 借工具 |
临时需要工具 |
即时 |
| 宠物照看 |
出差/旅行期间 |
提前预约 |
| 植物浇水 |
长期外出 |
提前预约 |
| 代收快递 |
不在家时 |
即时 |
| 其他帮助 |
其他互助需求 |
视情况 |
8.2 互助流程
8.3 互助积分系统
| 行为 |
积分 |
说明 |
| 发布闲置 |
+5 |
分享闲置物品 |
| 成功交易 |
+10 |
完成一次流转 |
| 响应互助 |
+15 |
帮助邻居 |
| 获得帮助 |
+5 |
感谢邻居 |
| 收到好评 |
+20 |
获得认可 |
九、性能优化
9.1 渲染优化
| 优化点 |
实现方式 |
效果 |
| 列表渲染 |
ListView |
按需渲染 |
| Tab切换 |
TabController |
平滑切换 |
| 状态更新 |
setState局部 |
减少重绘 |
| 图片加载 |
占位图 |
避免闪烁 |
9.2 内存管理
@override
void dispose() {
_tabController.dispose();
_titleController.dispose();
_descController.dispose();
_wishController.dispose();
super.dispose();
}
9.3 性能指标
| 指标 |
目标值 |
实测值 |
| 列表滚动 |
60fps |
60fps |
| 页面切换 |
< 300ms |
待测试 |
| 内存占用 |
< 50MB |
待测试 |
| 启动时间 |
< 2s |
待测试 |
十、常见问题
10.1 问题排查
| 问题 |
原因 |
解决方案 |
| 物品不显示 |
列表为空 |
检查数据加载 |
| 发布失败 |
输入为空 |
检查必填字段 |
| 筛选无效 |
状态未更新 |
检查setState |
| Tab不切换 |
控制器错误 |
检查TabController |
10.2 调试技巧
debugPrint('Items: ${_items.length}');
debugPrint('Available: ${_items.where((i) => i.status == ItemStatus.available).length}');
debugPrint('Help requests: ${_helpRequests.length}');
debugPrint('Urgent: ${_helpRequests.where((h) => h.isUrgent).length}');
十一、运行说明
11.1 环境要求
| 环境 |
版本要求 |
| Flutter SDK |
>= 3.0.0 |
| Dart SDK |
>= 2.17.0 |
| 鸿蒙OS |
API 21+ |
11.2 运行命令
flutter devices
flutter run -d 127.0.0.1:5555 lib/main_community_exchange.dart
flutter run -d web-server -t lib/main_community_exchange.dart --web-port 8135
flutter run -d windows -t lib/main_community_exchange.dart
flutter analyze lib/main_community_exchange.dart
十二、扩展建议
12.1 功能扩展
| 功能 |
优先级 |
实现思路 |
| 真实定位 |
高 |
集成定位服务 |
| 即时通讯 |
高 |
添加聊天功能 |
| 图片上传 |
高 |
支持拍照/相册 |
| 评价系统 |
中 |
交易双方互评 |
| 积分商城 |
中 |
积分兑换奖励 |
| 社区活动 |
低 |
组织线下活动 |
12.2 设计扩展
| 方向 |
描述 |
| 主题切换 |
多种配色主题 |
| 动画效果 |
物品发布动画 |
| 音效反馈 |
操作音效 |
| 夜间模式 |
深色主题 |
12.3 技术扩展
十三、总结
社区闲置循环应用通过创新的"闲置流转"概念,让社区内的闲置物品重新焕发价值。应用核心亮点包括:
13.1 核心特色
- 8种物品分类:全面覆盖各类闲置物品
- 3种发布类型:赠送、交换、借用满足不同需求
- 邻里互助:构建温馨互助的社区生态
- 交易记录:完整记录闲置流转历史
- 环保理念:促进资源循环,减少浪费
13.2 技术亮点
- 枚举类型设计:分类、类型、状态使用枚举,代码清晰
- 状态管理:清晰的页面状态流转
- 分类筛选:灵活的分类和类型筛选
- 详情展示:丰富的物品信息展示
- 互助系统:完整的邻里互助功能
13.3 社会价值
社区闲置循环不仅是一个物品交换平台,更是一个构建社区关系、促进环保生活的平台。通过闲置物品的流转,减少资源浪费,增进邻里感情,实现经济效益与社会效益的双赢。
让闲置流动起来,邻里互助,共建绿色社区!
愿每个闲置都能找到新主人 ♻️
所有评论(0)