开源鸿蒙跨平台Flutter开发：校园闲置物品交换应用

浮芷.2026-04-11 13:34

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

一、项目概述

运行效果图

1.1 应用简介

校园闲置物品交换是一款校园服务应用，为学生提供闲置物品交换和交易的平台。支持物品发布、在线交换、即时聊天等功能，让用户轻松处理闲置物品。应用内置物品分类、价格协商、交易评价等功能，打造安全便捷的校园二手交易环境。

应用以活力的绿色为主色调，象征环保与循环利用。涵盖物品浏览、发布物品、消息中心、个人中心四大模块。用户可以发布闲置物品、浏览交换信息、在线沟通、完成交易。

1.2 核心功能

功能模块 功能描述 实现方式
物品浏览 浏览闲置物品信息 列表展示
发布物品 发布闲置物品 表单提交
在线聊天 买卖双方沟通 即时消息
交易管理 管理交易记录 状态跟踪
评价系统 交易双方互评 评分评价

1.3 物品分类定义

序号 分类名称 Emoji 描述
1 教材书籍 📚 教材、参考书、小说
2 电子数码 💻 手机、电脑、配件
3 生活用品 🏠 日用品、家具
4 服装鞋帽 👕 衣服、鞋子、包包
5 运动器材 ⚽ 运动装备、器材
6 学习用品 ✏️ 文具、笔记本
7 其他 📦 其他闲置物品

1.4 物品状态定义

序号 状态名称 Emoji 描述
1 在售 🟢 正在出售中
2 已预订 🟡 已被预订
3 已售出 🔴 交易完成
4 已下架 ⚫ 已下架

1.5 技术栈

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

1.6 项目结构

复制代码 
lib/
└── main_campus_exchange.dart
    ├── CampusExchangeApp            # 应用入口
    ├── ItemCategory                 # 物品分类枚举
    ├── ItemStatus                   # 物品状态枚举
    ├── Item                         # 物品模型
    ├── Message                      # 消息模型
    ├── Transaction                  # 交易模型
    ├── User                         # 用户模型
    ├── CampusExchangeHomePage       # 主页面（底部导航）
    ├── _buildBrowsePage             # 浏览页面
    ├── _buildPublishPage            # 发布页面
    ├── _buildMessagePage            # 消息页面
    ├── _buildProfilePage            # 个人中心页面
    ├── ItemCard                     # 物品卡片组件
    ├── MessageBubble                # 消息气泡组件
    └── TransactionCard              # 交易卡片组件

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

CampusExchangeHomePage
浏览页
发布页
消息页
个人中心
物品列表
分类筛选
搜索功能
物品上传
信息填写
发布设置
聊天列表
消息详情
交易协商
我的物品
交易记录
评价管理
物品管理器

ItemManager
消息管理器

MessageManager
交易管理器

TransactionManager
Item

物品
Message

消息
Transaction

交易
User

用户

2.2 类图设计

has
has
references
references
references
references
references
CampusExchangeApp
+Widget build()
<<enumeration>>
ItemCategory
+String label
+String emoji
+books()
+electronics()
+daily()
+clothing()
+sports()
+stationery()
+other()
<<enumeration>>
ItemStatus
+String label
+String emoji
+available()
+reserved()
+sold()
+offline()
Item
+String id
+String title
+String description
+ItemCategory category
+double price
+String condition
+List<String> images
+String sellerId
+ItemStatus status
+DateTime createdAt
Message
+String id
+String senderId
+String receiverId
+String itemId
+String content
+DateTime timestamp
+bool isRead
Transaction
+String id
+String itemId
+String buyerId
+String sellerId
+TransactionStatus status
+DateTime createdAt
User
+String id
+String username
+String avatar
+String department
+double rating
+int transactionCount

2.3 页面导航流程

浏览
发布
消息
我的
应用启动
浏览页
底部导航
物品列表
发布物品
消息中心
个人中心
分类筛选
搜索物品
查看详情
联系卖家
在线聊天
协商交易
上传图片
填写信息
发布成功
聊天列表
我的物品
交易记录
我的评价

2.4 交易流程

交易管理 卖家 消息系统 物品详情 买家 交易管理 卖家 消息系统 物品详情 买家 浏览物品 显示物品信息 发送消息 推送消息 回复消息 显示回复 提出交易请求 发送请求 确认交易 创建交易 更新物品状态 交易确认 交易确认 确认收货 完成交易 提示评价 提示评价

三、核心模块设计

3.1 数据模型设计

3.1.1 物品分类枚举 (ItemCategory)
dart 复制代码 
enum ItemCategory {
  books(label: '教材书籍', emoji: '📚'),
  electronics(label: '电子数码', emoji: '💻'),
  daily(label: '生活用品', emoji: '🏠'),
  clothing(label: '服装鞋帽', emoji: '👕'),
  sports(label: '运动器材', emoji: '⚽'),
  stationery(label: '学习用品', emoji: '✏️'),
  other(label: '其他', emoji: '📦');

  final String label;
  final String emoji;
}
3.1.2 物品模型 (Item)
dart 复制代码 
class Item {
  final String id;              // 物品ID
  final String title;           // 物品标题
  final String description;     // 物品描述
  final ItemCategory category;  // 物品分类
  final double price;           // 价格
  final String condition;       // 成色
  final List<String> images;    // 图片列表
  final String sellerId;        // 卖家ID
  ItemStatus status;            // 物品状态
  final DateTime createdAt;     // 发布时间
}
3.1.3 消息模型 (Message)
dart 复制代码 
class Message {
  final String id;              // 消息ID
  final String senderId;        // 发送者ID
  final String receiverId;      // 接收者ID
  final String itemId;          // 物品ID
  final String content;         // 消息内容
  final DateTime timestamp;     // 时间戳
  final bool isRead;            // 是否已读
}
3.1.4 交易模型 (Transaction)
dart 复制代码 
class Transaction {
  final String id;              // 交易ID
  final String itemId;          // 物品ID
  final String buyerId;         // 买家ID
  final String sellerId;        // 卖家ID
  final TransactionStatus status; // 交易状态
  final DateTime createdAt;     // 创建时间
}
3.1.5 物品分类分布

35% 25% 15% 10% 8% 5% 2% 物品分类分布示例 教材书籍 电子数码 生活用品 服装鞋帽 运动器材 学习用品 其他

3.2 页面结构设计

3.2.1 主页面布局

CampusExchangeHomePage
IndexedStack
浏览页
发布页
消息页
个人中心
NavigationBar
浏览 Tab
发布 Tab
消息 Tab
我的 Tab

3.2.2 浏览页结构

浏览页
SliverAppBar
分类标签
物品列表
搜索入口
教材书籍
电子数码
生活用品
物品卡片
物品图片
价格信息
卖家信息

3.2.3 发布页结构

发布页
物品信息
图片上传
价格设置
发布设置
物品标题
物品描述
物品分类
选择图片
图片预览
价格输入
成色选择
发布按钮

3.2.4 消息页结构

消息页
SliverAppBar
聊天列表
未读提示
聊天项
对方头像
最新消息
时间显示
未读数量
消息提醒

3.3 物品发布逻辑

1-9张
过多或过少
是
否
开始发布
选择分类
上传图片
图片数量
填写信息
提示调整
设置价格
选择成色
预览物品
确认发布?
提交审核
保存草稿
发布成功
稍后发布

3.4 交易流程逻辑

是
否
是
否
发起交易
联系卖家
协商价格
达成一致?
创建交易
继续协商
物品预订
线下交易
交易完成?
确认收货
取消交易
双方评价
物品恢复
交易完成
交易取消

四、UI设计规范

4.1 配色方案

应用以活力的绿色为主色调，象征环保与循环利用：

颜色类型 色值 用途
主色 #4CAF50 (Green) 导航、主题元素
辅助色 #66BB6A 按钮高亮
第三色 #81C784 卡片背景
强调色 #A5D6A7 标签背景
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 物品卡片

4.2 物品状态颜色

状态 色值 视觉效果
在售 #4CAF50 清新绿色
已预订 #FFC107 明亮黄色
已售出 #F44336 鲜艳红色
已下架 #9E9E9E 中性灰色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
物品标题 18px Bold #000000
价格显示 20px Bold #FF5722
卖家名称 14px Medium #333333
物品描述 14px Regular #666666

4.4 组件规范

4.4.1 物品卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │         物品图片             │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  📚 高等数学教材（第七版）          │
│                                     │
│  💰 ¥25.00                         │
│                                     │
│  👤 张同学  ⭐ 4.8                  │
│                                     │
│  🟢 在售  ✨ 9成新                  │
└─────────────────────────────────────┘
4.4.2 分类标签
复制代码 
┌─────────────────────────────────────┐
│  物品分类                            │
│                                     │
│  [📚教材] [💻数码] [🏠生活]         │
│  [👕服装] [⚽运动] [✏️文具]         │
│  [📦其他]                           │
└─────────────────────────────────────┘
4.4.3 消息气泡
复制代码 
┌─────────────────────────────────────┐
│  聊天消息                            │
│                                     │
│  👤 张同学                           │
│  ┌─────────────────────────────┐   │
│  │ 你好，这个还在吗？           │   │
│  └─────────────────────────────┘   │
│  📅 10:30                          │
│                                     │
│           ┌─────────────────────────────┐
│           │ 在的，可以交换             │   │
│           └─────────────────────────────┘
│           📅 10:32                    │
└─────────────────────────────────────┘
4.4.4 发布表单
复制代码 
┌─────────────────────────────────────┐
│  发布物品                            │
│                                     │
│  物品标题                            │
│  ┌─────────────────────────────┐   │
│  │ 请输入物品标题               │   │
│  └─────────────────────────────┘   │
│                                     │
│  物品分类                            │
│  [📚教材] [💻数码] [🏠生活]         │
│                                     │
│  物品图片                            │
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐         │
│  │ + │ │图1│ │图2│ │图3│         │
│  └───┘ └───┘ └───┘ └───┘         │
│                                     │
│  价格                                │
│  ┌─────────────────────────────┐   │
│  │ ¥ 请输入价格                 │   │
│  └─────────────────────────────┘   │
│                                     │
│  成色                                │
│  [全新] [9成新] [8成新] [7成新]     │
│                                     │
│  [发布物品]                         │
└─────────────────────────────────────┘
4.4.5 交易记录
复制代码 
┌─────────────────────────────────────┐
│  交易记录                            │
│                                     │
│  📚 高等数学教材                     │
│  💰 ¥25.00                          │
│                                     │
│  买家: 张同学                        │
│  卖家: 李同学                        │
│                                     │
│  状态: ✅ 交易完成                   │
│  📅 2024-01-15                      │
│                                     │
│  [查看详情] [评价交易]               │
└─────────────────────────────────────┘

五、核心功能实现

5.1 物品发布实现

dart 复制代码 
class ItemPublisher {
  static Future<Item> publishItem({
    required String title,
    required String description,
    required ItemCategory category,
    required double price,
    required String condition,
    required List<String> images,
    required String sellerId,
  }) async {
    // 验证物品信息
    if (title.isEmpty) {
      throw Exception('物品标题不能为空');
    }
    
    if (price < 0) {
      throw Exception('价格不能为负数');
    }
    
    if (images.isEmpty) {
      throw Exception('请至少上传一张图片');
    }
    
    // 创建物品对象
    final item = Item(
      id: 'item_${DateTime.now().millisecondsSinceEpoch}',
      title: title,
      description: description,
      category: category,
      price: price,
      condition: condition,
      images: images,
      sellerId: sellerId,
      status: ItemStatus.available,
      createdAt: DateTime.now(),
    );
    
    return item;
  }
}

5.2 消息发送实现

dart 复制代码 
class MessageService {
  static Future<Message> sendMessage({
    required String senderId,
    required String receiverId,
    required String itemId,
    required String content,
  }) async {
    // 验证消息内容
    if (content.isEmpty) {
      throw Exception('消息内容不能为空');
    }
    
    // 创建消息
    final message = Message(
      id: 'msg_${DateTime.now().millisecondsSinceEpoch}',
      senderId: senderId,
      receiverId: receiverId,
      itemId: itemId,
      content: content,
      timestamp: DateTime.now(),
      isRead: false,
    );
    
    // 发送通知
    await sendNotification(receiverId, message);
    
    return message;
  }
}

5.3 交易创建实现

dart 复制代码 
class TransactionService {
  static Future<Transaction> createTransaction({
    required String itemId,
    required String buyerId,
    required String sellerId,
  }) async {
    // 检查物品状态
    final item = await ItemManager.getItem(itemId);
    if (item.status != ItemStatus.available) {
      throw Exception('物品不可交易');
    }
    
    // 创建交易
    final transaction = Transaction(
      id: 'trans_${DateTime.now().millisecondsSinceEpoch}',
      itemId: itemId,
      buyerId: buyerId,
      sellerId: sellerId,
      status: TransactionStatus.pending,
      createdAt: DateTime.now(),
    );
    
    // 更新物品状态
    await ItemManager.updateItemStatus(itemId, ItemStatus.reserved);
    
    return transaction;
  }
}

5.4 搜索功能实现

dart 复制代码 
class ItemSearchService {
  static List<Item> search({
    required String keyword,
    required List<Item> items,
    ItemCategory? category,
    double? minPrice,
    double? maxPrice,
  }) {
    return items.where((item) {
      // 关键词匹配
      final matchesKeyword = keyword.isEmpty ||
        item.title.toLowerCase().contains(keyword.toLowerCase()) ||
        item.description.toLowerCase().contains(keyword.toLowerCase());
      
      // 分类筛选
      final matchesCategory = category == null || item.category == category;
      
      // 价格筛选
      final matchesPrice = (minPrice == null || item.price >= minPrice) &&
                          (maxPrice == null || item.price <= maxPrice);
      
      // 状态筛选
      final matchesStatus = item.status == ItemStatus.available;
      
      return matchesKeyword && matchesCategory && matchesPrice && matchesStatus;
    }).toList();
  }
}

5.5 评价功能实现

dart 复制代码 
class ReviewService {
  static Future<void> submitReview({
    required String transactionId,
    required String reviewerId,
    required String revieweeId,
    required double rating,
    required String comment,
  }) async {
    // 验证评分
    if (rating < 1 || rating > 5) {
      throw Exception('评分必须在1-5之间');
    }
    
    // 创建评价
    final review = Review(
      id: 'review_${DateTime.now().millisecondsSinceEpoch}',
      transactionId: transactionId,
      reviewerId: reviewerId,
      revieweeId: revieweeId,
      rating: rating,
      comment: comment,
      createdAt: DateTime.now(),
    );
    
    // 更新用户评分
    await updateUserRating(revieweeId, rating);
  }
}

六、交互设计

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 基础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_campus_exchange.dart --web-port 8145

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

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

十、总结

校园闲置物品交换应用是一款校园服务应用，通过物品浏览、发布物品、消息中心、个人中心四大模块，为学生提供闲置物品交换和交易的平台。应用支持物品发布、在线交换、即时聊天等功能，让用户轻松处理闲置物品。

核心功能涵盖物品浏览、物品发布、在线聊天、交易管理四大模块。物品浏览支持分类筛选和搜索；物品发布支持图片上传和信息填写；在线聊天支持即时沟通和交易协商；交易管理支持交易记录和评价系统。

应用采用 Material Design 3 设计规范，以活力的绿色为主色调，象征环保与循环利用。通过本应用，希望能够帮助学生便捷地处理闲置物品，促进校园资源循环利用，打造安全便捷的校园二手交易环境。

校园闲置物品交换------循环利用，绿色校园

相关推荐
李李李勃谦2 小时前
Flutter 框架跨平台鸿蒙开发 - 手工技能学习
学习·flutter·华为·harmonyos
世人万千丶2 小时前
开源鸿蒙跨平台Flutter开发：时间管理番茄钟应用
学习·flutter·华为·开源·harmonyos
提子拌饭1332 小时前
开源鸿蒙跨平台Flutter开发：AR太空探索应用
flutter·华为·架构·开源·harmonyos·鸿蒙
互联网散修3 小时前
零基础鸿蒙应用开发第三十一节：await简化异步编程与Promise进阶并发
harmonyos
ECT-OS-JiuHuaShan3 小时前
科学的本来意义，是基于规范的共识逻辑，而非共识方法
人工智能·科技·学习·算法·生活
dozenyaoyida3 小时前
2026年4月10日科技行业热点新闻速递
科技·新浪微博
梁山好汉（Ls_man）3 小时前
鸿蒙电脑 DevEco Studio 预览版
华为·harmonyos
梁山好汉（Ls_man）3 小时前
鸿蒙_使用组件导航Navigation搭建应用框架
华为·harmonyos·鸿蒙·arkui
信创DevOps先锋3 小时前
开源中国全栈式AI教育解决方案亮相 破解高校科研与人才培养双重痛点
人工智能·开源
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了07Oh My Codex 快速使用指南08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09MySQL表约束详解：8大核心约束实战指南10【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时