Flutter 框架跨平台鸿蒙开发 - 蛋糕甜品预订

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

蛋糕甜品预订系统

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图


1.1 应用简介

蛋糕甜品预订系统是一款便捷的甜品预订应用，为用户提供丰富的蛋糕、甜点、饮品、面包、冰淇淋等商品选择。支持商品分类浏览、购物车管理、在线下单、订单追踪等功能，让用户足不出户即可享受甜蜜时光。

应用以温馨的粉色为主色调，象征甜蜜与幸福。涵盖首页推荐、甜品菜单、购物车、个人中心四大模块。用户可以浏览热销新品、筛选商品类型、管理购物车、提交订单、查看订单状态，实现一站式甜品预订服务。

1.2 核心功能

功能模块 功能描述 实现方式
商品浏览 5种甜品类型分类 枚举定义
购物车 商品增删改查 列表管理
订单管理 5种订单状态追踪 状态管理
筛选功能 类型筛选 过滤逻辑
详情展示 底部弹窗详情 模态窗口
数量调整 加减按钮控制 状态更新

1.3 甜品类型定义

序号 类型名称 Emoji 描述
1 蛋糕 🎂 生日蛋糕、庆典蛋糕
2 甜点 🧁 杯子蛋糕、马卡龙
3 饮品 🥤 奶茶、果汁、咖啡
4 面包 🍞 吐司、法棍、甜面包
5 冰淇淋 🍨 冰淇淋、雪糕

1.4 订单状态定义

序号 状态名称 Emoji 描述
1 待支付 💳 等待支付
2 已支付 ✅ 支付成功
3 制作中 👨‍🍳 正在制作
4 已完成 🎉 订单完成
5 已取消 ❌ 订单取消

1.5 商品属性定义

属性 说明
name 商品名称
type 商品类型
price 商品价格
rating 商品评分
salesCount 月销量
isNew 是否新品
isHot 是否热销

1.6 技术栈

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

1.7 项目结构

复制代码 
lib/
└── main_cake_order.dart
    ├── CakeOrderApp                   # 应用入口
    ├── DessertType                    # 甜品类型枚举
    ├── OrderStatus                    # 订单状态枚举
    ├── Dessert                        # 商品模型
    ├── CartItem                       # 购物车项模型
    ├── Order                          # 订单模型
    ├── CakeOrderHomePage              # 主页面（底部导航）
    ├── _buildHomePage                 # 首页
    ├── _buildMenuPage                 # 菜单页
    ├── _buildCartPage                 # 购物车页
    └── _buildProfilePage              # 我的页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

CakeOrderHomePage
首页
菜单页
购物车页
我的页
快速统计
分类入口
热销推荐
新品上市
类型筛选
商品列表
商品详情
购物车列表
数量调整
订单表单
提交订单
用户统计
订单列表
订单详情
商品管理器

DessertManager
购物车管理器

CartManager
订单管理器

OrderManager
Dessert

商品模型
CartItem

购物车模型
Order

订单模型
DessertType

商品类型
OrderStatus

订单状态

2.2 类图设计

has
references
contains
has
CakeOrderApp
+Widget build()
<<enumeration>>
DessertType
+String label
+String emoji
+String description
+cake()
+pastry()
+drink()
+bread()
+icecream()
<<enumeration>>
OrderStatus
+String label
+String emoji
+String description
+pending()
+paid()
+preparing()
+completed()
+cancelled()
Dessert
+String id
+String name
+DessertType type
+double price
+String description
+String emoji
+double rating
+int salesCount
+bool isNew
+bool isHot
CartItem
+Dessert dessert
+int quantity
+String? note
+double totalPrice
Order
+String id
+List<CartItem> items
+double totalPrice
+OrderStatus status
+DateTime createdAt
+String address
+String contactName
+String contactPhone
+String? note
+copyWith()

2.3 页面导航流程

首页
菜单
购物车
我的
待支付
应用启动
首页
底部导航
查看推荐
商品列表
购物车管理
个人中心
分类入口
筛选类型
查看详情
加入购物车
调整数量
填写信息
提交订单
查看订单
订单详情
状态判断
支付/取消

2.4 购物流程

订单系统 购物车 菜单页 用户 订单系统 购物车 菜单页 用户 浏览商品 显示商品列表 点击商品详情 显示商品详情 加入购物车 添加商品 查看购物车 显示商品列表 调整数量 更新显示 提交订单 创建订单 订单创建成功

三、核心模块设计

3.1 数据模型设计

3.1.1 甜品类型枚举 (DessertType)
dart 复制代码 
enum DessertType {
  cake(label: '蛋糕', emoji: '🎂', description: '生日蛋糕、庆典蛋糕'),
  pastry(label: '甜点', emoji: '🧁', description: '杯子蛋糕、马卡龙'),
  drink(label: '饮品', emoji: '🥤', description: '奶茶、果汁、咖啡'),
  bread(label: '面包', emoji: '🍞', description: '吐司、法棍、甜面包'),
  icecream(label: '冰淇淋', emoji: '🍨', description: '冰淇淋、雪糕');

  final String label;
  final String emoji;
  final String description;
}
3.1.2 订单状态枚举 (OrderStatus)
dart 复制代码 
enum OrderStatus {
  pending(label: '待支付', emoji: '💳', description: '等待支付'),
  paid(label: '已支付', emoji: '✅', description: '支付成功'),
  preparing(label: '制作中', emoji: '👨‍🍳', description: '正在制作'),
  completed(label: '已完成', emoji: '🎉', description: '订单完成'),
  cancelled(label: '已取消', emoji: '❌', description: '订单取消');

  final String label;
  final String emoji;
  final String description;
}
3.1.3 商品模型 (Dessert)
dart 复制代码 
class Dessert {
  final String id;              // 商品ID
  final String name;            // 商品名称
  final DessertType type;       // 商品类型
  final double price;           // 商品价格
  final String description;     // 商品描述
  final String emoji;           // 商品图标
  final double rating;          // 商品评分
  final int salesCount;         // 月销量
  final bool isNew;             // 是否新品
  final bool isHot;             // 是否热销
}
3.1.4 购物车项模型 (CartItem)
dart 复制代码 
class CartItem {
  final Dessert dessert;        // 商品信息
  int quantity;                 // 数量
  final String? note;           // 备注

  double get totalPrice => dessert.price * quantity;
}
3.1.5 订单模型 (Order)
dart 复制代码 
class Order {
  final String id;              // 订单ID
  final List<CartItem> items;   // 商品列表
  final double totalPrice;      // 总价
  final OrderStatus status;     // 订单状态
  final DateTime createdAt;     // 创建时间
  final String address;         // 配送地址
  final String contactName;     // 联系人
  final String contactPhone;    // 联系电话
  final String? note;           // 备注
}
3.1.6 商品类型分布

30% 25% 20% 15% 10% 商品类型分布示例 蛋糕 甜点 饮品 面包 冰淇淋

3.2 页面结构设计

3.2.1 主页面布局

CakeOrderHomePage
IndexedStack
首页
菜单页
购物车页
我的页
NavigationBar
首页 Tab
菜单 Tab
购物车 Tab
我的 Tab

3.2.2 首页结构

首页
SliverAppBar
快速统计
分类入口
热销推荐
新品上市
新品数量
热销数量
平均评分
蛋糕
甜点
饮品
面包
冰淇淋
横向滚动卡片
查看全部入口
新品列表

3.2.3 菜单页结构

菜单页
SliverAppBar
筛选芯片
商品列表
全部
蛋糕
甜点
饮品
面包
冰淇淋
商品卡片
商品图标
商品信息
评分销量
价格添加

3.2.4 购物车页结构

购物车页
SliverAppBar
购物车列表
订单表单
商品项卡片
商品信息
数量调整
小计金额
配送地址
联系人信息
备注信息
合计金额
提交按钮

3.3 购物车管理逻辑

是
否
是
否
添加商品
商品是否已存在?
数量+1
新建购物车项
更新购物车
显示提示
调整数量
数量是否为0?
移除商品
更新数量
更新购物车

3.4 订单状态流转

提交订单
支付成功
取消订单
开始制作
制作完成
待支付
已支付
已取消
制作中
已完成

四、UI设计规范

4.1 配色方案

应用以温馨的粉色为主色调，象征甜蜜与幸福：

颜色类型 色值 用途
主色 #E91E63 (Pink) 导航、主题元素
辅助色 #F06292 菜单页面
第三色 #F48FB1 购物车页面
强调色 #F8BBD0 我的页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片

4.2 状态颜色定义

状态 色值 用途
待支付 #FF9800 橙色提醒
已支付 #2196F3 蓝色确认
制作中 #9C27B0 紫色进行
已完成 #4CAF50 绿色成功
已取消 #9E9E9E 灰色结束

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
商品名称 16px Bold #000000
商品价格 16px Bold 主色
状态标签 12px Regular 状态色
统计数字 20px Bold 白色

4.4 组件规范

4.4.1 商品卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌──────┐  [新品] [热销] 商品名称   │
│  │  🍰  │  商品描述...              │
│  └──────┘  ⭐ 4.8  月售1256  ¥128  │
│                              [+]   │
└─────────────────────────────────────┘
4.4.2 购物车项
复制代码 
┌─────────────────────────────────────┐
│  ┌──────┐  草莓奶油蛋糕             │
│  │  🍰  │  ¥128                     │
│  └──────┘  [-] 1 [+]      ¥128     │
└─────────────────────────────────────┘
4.4.3 分类入口
复制代码 
┌─────────────────────────────────────┐
│  分类浏览                            │
│                                     │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐│
│  │ 🎂 │ │ 🧁 │ │ 🥤 │ │ 🍞 │ │ 🍨 ││
│  │蛋糕│ │甜点│ │饮品│ │面包│ │冰淇淋│
│  └────┘ └────┘ └────┘ └────┘ └────┘│
└─────────────────────────────────────┘
4.4.4 订单卡片
复制代码 
┌─────────────────────────────────────┐
│  订单号: ORD001         [✅ 已支付] │
│                                     │
│  🍰 草莓奶油蛋糕 x1  🧋 珍珠奶茶 x2 │
│                                     │
│  12/25 10:30                  ¥164 │
└─────────────────────────────────────┘

五、核心功能实现

5.1 添加购物车实现

dart 复制代码 
void _addToCart(Dessert dessert) {
  setState(() {
    final existingIndex = _cartItems.indexWhere((item) => item.dessert.id == dessert.id);
    if (existingIndex != -1) {
      _cartItems[existingIndex].quantity++;
    } else {
      _cartItems.add(CartItem(dessert: dessert));
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('${dessert.emoji} ${dessert.name} 已加入购物车'),
      duration: const Duration(seconds: 1),
    ),
  );
}

5.2 更新购物车数量实现

dart 复制代码 
void _updateCartQuantity(CartItem item, int quantity) {
  setState(() {
    if (quantity <= 0) {
      _cartItems.remove(item);
    } else {
      item.quantity = quantity;
    }
  });
}

5.3 提交订单实现

dart 复制代码 
void _submitOrder({
  required String address,
  required String contactName,
  required String contactPhone,
  String? note,
}) {
  final totalPrice = _cartItems.fold(0.0, (sum, item) => sum + item.totalPrice);

  setState(() {
    final order = Order(
      id: 'ORD${DateTime.now().millisecondsSinceEpoch}',
      items: List.from(_cartItems),
      totalPrice: totalPrice,
      status: OrderStatus.pending,
      createdAt: DateTime.now(),
      address: address,
      contactName: contactName,
      contactPhone: contactPhone,
      note: note,
    );

    _orders.insert(0, order);
    _cartItems.clear();
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('订单提交成功，请及时支付')),
  );
}

5.4 支付订单实现

dart 复制代码 
void _payOrder(Order order) {
  setState(() {
    final index = _orders.indexWhere((o) => o.id == order.id);
    if (index != -1) {
      _orders[index] = order.copyWith(status: OrderStatus.paid);
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('支付成功')),
  );
}

5.5 取消订单实现

dart 复制代码 
void _cancelOrder(Order order) {
  setState(() {
    final index = _orders.indexWhere((o) => o.id == order.id);
    if (index != -1) {
      _orders[index] = order.copyWith(status: OrderStatus.cancelled);
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('订单已取消')),
  );
}

5.6 商品筛选实现

dart 复制代码 
List<Dessert> _getFilteredDesserts() {
  if (_selectedType == null) {
    return _desserts;
  }
  return _desserts.where((d) => d.type == _selectedType).toList();
}

六、交互设计

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. 网络请求：实际使用需对接后端API

  3. 支付集成：需集成第三方支付SDK

  4. 价格计算：注意浮点数精度问题

  5. 状态同步：订单状态变更需及时更新UI

8.2 常见问题

问题 原因 解决方案
购物车数量异常 状态未更新 使用setState
价格计算错误 浮点精度问题 使用字符串处理
订单状态不对 状态未同步 实现状态监听
商品不显示 筛选条件错误 检查筛选逻辑
支付失败 接口问题 检查网络请求

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_cake_order.dart --web-port 8146

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

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

十、总结

蛋糕甜品预订系统通过首页推荐、甜品菜单、购物车、个人中心四大模块，为用户提供了一个便捷的甜品预订平台。应用支持5种甜品类型、5种订单状态，让用户足不出户即可享受甜蜜时光。

核心功能涵盖商品浏览、购物车管理、在线下单、订单查询四大模块。甜品类型包括蛋糕、甜点、饮品、面包、冰淇淋等；订单状态从待支付到已完成，全程可追踪；购物车支持商品增删改查，灵活管理。

应用采用 Material Design 3 设计规范，以温馨的粉色为主色调，象征甜蜜与幸福。通过本应用，希望能够帮助用户便捷选购心仪甜品，享受甜蜜生活。

蛋糕甜品预订系统------甜蜜时光，一键预订

相关推荐
不爱吃糖的程序媛2 小时前
配置别名，简化 Flutter OpenHarmony 日常编译命令
flutter
HwJack203 小时前
HarmonyOS `hitTestBehavior` 与 `HitTestMode.Block`：揭开事件穿透与拦截的底层暗流
华为·harmonyos
Ww.xh3 小时前
ArkTS重构：Android转HarmonyOS核心要点
华为·harmonyos
_waylau3 小时前
鸿蒙架构师修炼之道-B/S与C/S架构
华为·架构·harmonyos·鸿蒙·鸿蒙系统
Swift社区3 小时前
鸿蒙 vs iOS / Android：谁更适合 AI？
android·ios·harmonyos
雷帝木木4 小时前
Flutter 组件 http_interop 的适配 鸿蒙Harmony 深度进阶 - 驾驭多级拦截器链、实现鸿蒙端标准化通讯审计与流量路由中继方案
flutter·harmonyos·鸿蒙·openharmony·http_interop
2301_822703204 小时前
鸿蒙Flutter第三方库FlutterUnit组件百科适配与具体功能演示
flutter·华为·开源·harmonyos·鸿蒙
亘元有量-流量变现4 小时前
ASO优化全流程实操指南：从基础到迭代，精准提升App曝光与转化
android·ios·harmonyos·aso优化·方糖试玩
李李李勃谦4 小时前
Flutter 框架跨平台鸿蒙开发 - 家政服务预约平台
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最新）06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南