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

李李李勃谦

448人浏览 · 2026-04-11 19:02:16

李李李勃谦 · 2026-04-11 19:02:16 发布

蛋糕甜品预订系统

欢迎加入开源鸿蒙跨平台社区：
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 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 购物流程

三、核心模块设计

3.1 数据模型设计

3.1.1 甜品类型枚举 (DessertType)

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)

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)

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)

class CartItem {
  final Dessert dessert;        // 商品信息
  int quantity;                 // 数量
  final String? note;           // 备注

  double get totalPrice => dessert.price * quantity;
}

3.1.5 订单模型 (Order)

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 商品类型分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 菜单页结构

3.2.4 购物车页结构

3.3 购物车管理逻辑

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 添加购物车实现

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 更新购物车数量实现

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

5.3 提交订单实现

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 支付订单实现

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 取消订单实现

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 商品筛选实现

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

六、交互设计

6.1 商品浏览流程

6.2 下单流程

6.3 订单管理流程

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 在线支付

支付功能：

微信支付集成
支付宝支付集成
银行卡支付
余额支付

7.2.2 优惠券系统

优惠功能：

满减优惠券
折扣券
新人专享
会员专属

7.2.3 配送追踪

配送功能：

实时位置追踪
配送员信息
预计送达时间
配送状态通知

八、注意事项

8.1 开发注意事项

数据持久化：购物车和订单数据需持久化存储
网络请求：实际使用需对接后端API
支付集成：需集成第三方支付SDK
价格计算：注意浮点数精度问题
状态同步：订单状态变更需及时更新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 运行命令

# 查看可用设备
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 设计规范，以温馨的粉色为主色调，象征甜蜜与幸福。通过本应用，希望能够帮助用户便捷选购心仪甜品，享受甜蜜生活。

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

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

政务APP适配原生鸿蒙，如何借助小程序容器复用已有代码快速开发鸿蒙原生APP

HarmonyOS开发者社区

【开发者故事】告别千篇一律，用HarmonyOS AI识图能力打造你的专属桌面潮玩

HarmonyOS开发者社区

我用 Screen Time API 做了个鸿蒙/iOS App，算出每笔订阅的单次使用成本

上个月账单日，我盯着信用卡自动扣款列表数了一遍：Notion、Figma、ChatGPT Plus、iCloud 200G、YouTube Premium、Spotify、某个健身 App、某个冥想 App……订阅斩面向的是订阅了 5 个以上 SaaS/App 服务、每月固定支出在 200-1000 元区间、想要量化管理这笔开支的年轻上班族。它要做的事情是把「感觉不太用得到」变成「数据证明你确实不

HarmonyOS开发者社区

所有评论(0)

查看更多评论

李李李勃谦

@2401_83963227

已为社区贡献49条内容

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

李李李勃谦

蛋糕甜品预订系统

一、项目概述

1.1 应用简介

1.2 核心功能

1.3 甜品类型定义

1.4 订单状态定义

1.5 商品属性定义

1.6 技术栈

1.7 项目结构

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 购物流程

三、核心模块设计

3.1 数据模型设计

3.1.1 甜品类型枚举 (DessertType)

3.1.2 订单状态枚举 (OrderStatus)

3.1.3 商品模型 (Dessert)

3.1.4 购物车项模型 (CartItem)

3.1.5 订单模型 (Order)

3.1.6 商品类型分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 菜单页结构

3.2.4 购物车页结构

3.3 购物车管理逻辑

3.4 订单状态流转

四、UI设计规范

4.1 配色方案

4.2 状态颜色定义

4.3 字体规范

4.4 组件规范

4.4.1 商品卡片

4.4.2 购物车项

4.4.3 分类入口

4.4.4 订单卡片

五、核心功能实现

5.1 添加购物车实现

5.2 更新购物车数量实现

5.3 提交订单实现

5.4 支付订单实现

5.5 取消订单实现

5.6 商品筛选实现

六、交互设计

6.1 商品浏览流程

6.2 下单流程

6.3 订单管理流程

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 在线支付

7.2.2 优惠券系统

7.2.3 配送追踪

八、注意事项

8.1 开发注意事项

8.2 常见问题

8.3 使用技巧

九、运行说明

9.1 环境要求

9.2 运行命令

十、总结

所有评论(0)

温馨提示：您尚未绑定手机号

李李李勃谦