Flutter 框架跨平台鸿蒙开发 - 生鲜食材预订配送

生鲜食材预订配送应用

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

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	已取消	❌	订单已取消

1.5 配送时段定义

序号	时段名称	Emoji	时间范围
1	早晨	🌅	07:00 - 09:00
2	上午	☀️	09:00 - 12:00
3	下午	🌤️	14:00 - 17:00
4	傍晚	🌆	17:00 - 20:00

1.6 技术栈

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

1.7 项目结构

复制代码

lib/
└── main_fresh_food_delivery.dart
    ├── FreshFoodDeliveryApp         # 应用入口
    ├── FoodCategory                 # 食材分类枚举
    ├── OrderStatus                  # 订单状态枚举
    ├── DeliveryTimeSlot             # 配送时段枚举
    ├── Product                      # 商品模型
    ├── CartItem                     # 购物车项模型
    ├── Order                        # 订单模型
    ├── Address                      # 地址模型
    ├── FreshFoodDeliveryHomePage    # 主页面（底部导航）
    ├── _buildHomePage               # 首页
    ├── _buildCartPage               # 购物车页
    ├── _buildOrdersPage             # 订单页
    └── _buildProfilePage            # 个人中心页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

FreshFoodDeliveryHomePage
首页
购物车页
订单页
个人中心页
分类导航
商品列表
搜索功能
推荐专区
商品列表
数量调整
结算功能
订单列表
订单详情
状态追踪
地址管理
个人设置
购物车管理

CartManager
订单处理

OrderProcessor
配送服务

DeliveryService
Product

商品
CartItem

购物车项
Order

订单
Address

地址

2.2 类图设计

belongs to
contains
contains
has
delivers to
scheduled
FreshFoodDeliveryApp
+Widget build()
<<enumeration>>
FoodCategory
+String label
+String emoji
+vegetables()
+fruits()
+meat()
+seafood()
+dairy()
+grains()
<<enumeration>>
OrderStatus
+String label
+String emoji
+pending()
+processing()
+delivering()
+completed()
+cancelled()
<<enumeration>>
DeliveryTimeSlot
+String label
+String emoji
+String timeRange
+morning()
+noon()
+afternoon()
+evening()
Product
+String id
+String name
+FoodCategory category
+double price
+String unit
+String description
+double rating
+int sales
+bool isHot
+bool isNew
CartItem
+Product product
+int quantity
+double get total
Order
+String id
+List<CartItem> items
+double totalAmount
+OrderStatus status
+Address address
+DeliveryTimeSlot timeSlot
+DateTime createdAt
Address
+String id
+String name
+String phone
+String detail
+bool isDefault

2.3 页面导航流程

首页
购物车
订单
我的
应用启动
首页
底部导航
浏览商品
查看购物车
订单列表
个人中心
选择分类
查看商品
加入购物车
调整数量
选择地址
选择时段
提交订单
查看详情
追踪配送

2.4 下单流程

配送服务订单系统购物车首页用户配送服务订单系统购物车首页用户浏览商品加入购物车添加商品查看购物车调整数量点击结算选择配送地址确认地址选择配送时段确认时段提交订单订单创建成功分配配送配送中通知送达通知

三、核心模块设计

3.1 数据模型设计

3.1.1 食材分类枚举 (FoodCategory)

dart 复制代码

enum FoodCategory {
  vegetables(label: '蔬菜', emoji: '🥬'),
  fruits(label: '水果', emoji: '🍎'),
  meat(label: '肉禽', emoji: '🥩'),
  seafood(label: '海鲜', emoji: '🦐'),
  dairy(label: '蛋奶', emoji: '🥚'),
  grains(label: '粮油', emoji: '🌾');

  final String label;
  final String emoji;
}

3.1.2 订单状态枚举 (OrderStatus)

dart 复制代码

enum OrderStatus {
  pending(label: '待付款', emoji: '💳'),
  processing(label: '待配送', emoji: '📦'),
  delivering(label: '配送中', emoji: '🚚'),
  completed(label: '已送达', emoji: '✅'),
  cancelled(label: '已取消', emoji: '❌');

  final String label;
  final String emoji;
}

3.1.3 商品模型 (Product)

dart 复制代码

class Product {
  final String id;              // 商品ID
  final String name;            // 商品名称
  final FoodCategory category;  // 所属分类
  final double price;           // 单价
  final String unit;            // 单位
  final String description;     // 商品描述
  final double rating;          // 评分
  final int sales;              // 销量
  final bool isHot;             // 是否热销
  final bool isNew;             // 是否新品
}

3.1.4 购物车项模型 (CartItem)

dart 复制代码

class CartItem {
  final Product product;        // 商品信息
  int quantity;                 // 数量
  double get total => product.price * quantity;
}

3.1.5 订单模型 (Order)

dart 复制代码

class Order {
  final String id;              // 订单ID
  final List<CartItem> items;   // 商品列表
  final double totalAmount;     // 总金额
  OrderStatus status;           // 订单状态
  final Address address;        // 配送地址
  final DeliveryTimeSlot timeSlot; // 配送时段
  final DateTime createdAt;     // 创建时间
}

3.1.6 商品分类分布

25% 20% 18% 15% 12% 10% 商品分类分布示例蔬菜水果肉禽海鲜蛋奶粮油

3.2 页面结构设计

3.2.1 主页面布局

FreshFoodDeliveryHomePage
IndexedStack
首页
购物车页
订单页
个人中心页
NavigationBar
首页 Tab
购物车 Tab
订单 Tab
我的 Tab

3.2.2 首页结构

首页
SliverAppBar
搜索栏
分类导航
推荐专区
商品列表
分类图标
分类名称
热门推荐
新品上市
限时优惠
商品卡片
商品图片
商品名称
价格销量
加入购物车

3.2.3 购物车页结构

购物车页
AppBar
商品列表
底部结算栏
商品项
商品信息
数量调整
删除按钮
全选按钮
合计金额
结算按钮

3.2.4 订单页结构

订单页
AppBar
状态筛选
订单列表
全部
待付款
待配送
配送中
订单卡片
订单编号
商品摘要
订单金额
订单状态
操作按钮

3.3 购物车管理逻辑

是
否
是
否
添加商品
商品已存在?
数量+1
新增购物车项
更新购物车
重新计算总价
调整数量
数量>0?
更新数量
删除商品
删除商品

3.4 订单状态流转

提交订单
支付成功
取消订单
开始配送
取消订单
配送完成
待付款
待配送
已取消
配送中
已送达

四、UI设计规范

4.1 设计原则

原则	说明
清新简洁	界面干净，信息层次分明
操作便捷	减少点击，快速完成购物
视觉舒适	色彩柔和，符合生鲜主题
信息清晰	价格、状态一目了然

4.2 色彩规范

颜色类型	色值	用途
主色	#FF6B35	强调、按钮
辅助色	#4CAF50	新鲜、健康
背景色	#FFF8F0	页面背景
卡片色	#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.3 订单模块

5.3.1 订单列表

按状态筛选订单
显示订单基本信息
支持订单操作

5.3.2 订单详情

商品明细
配送信息
订单状态
操作按钮

5.4 个人中心模块

5.4.1 地址管理

添加新地址
编辑地址
设置默认地址
删除地址

5.4.2 其他功能

订单历史
收藏商品
客服联系
设置

六、数据统计

6.1 订单状态分布

45% 20% 15% 10% 10% 订单状态分布已送达配送中待配送待付款已取消

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 2026-04-12 项目搭建数据模型首页开发购物车功能订单功能个人中心 UI优化测试调试基础功能核心功能优化完善开发计划

7.2 功能清单

优先级	功能模块	功能点	状态
P0	首页	商品浏览	已完成
P0	首页	分类筛选	已完成
P0	购物车	商品管理	已完成
P0	订单	订单创建	已完成
P1	订单	状态追踪	已完成
P1	个人中心	地址管理	已完成
P2	首页	搜索功能	已完成
P2	订单	评价功能	待开发

八、总结

生鲜食材预订配送应用采用Flutter框架开发，遵循Material Design 3设计规范，实现了完整的生鲜购物流程。应用涵盖商品浏览、购物车管理、订单处理、配送服务等核心功能，为用户提供便捷的生鲜购物体验。

通过枚举类型定义食材分类和订单状态，确保数据的一致性和可维护性。采用setState进行状态管理，实现购物车和订单的实时更新。界面设计清新简洁，操作流程顺畅，符合用户使用习惯。