Flutter 框架跨平台鸿蒙开发 - 红酒知识应用开发相关技术内容
摘要： 红酒知识应用是一款基于Flutter开发的跨平台应用，专注于红酒文化普及与学习。应用包含五大红酒分类展示、名酒库查询、品鉴知识学习等核心功能，采用Material Design 3设计规范，支持鸿蒙OS和Web平台。系统架构分为表现层和数据层，通过底部导航实现页面跳转，包含首页、名酒库、知识页和设置页等模块。数据模型采用Wine和WineCategory类管理酒款与分类信息，支持按类型筛选
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
红酒知识应用是一款专注于红酒文化普及与学习的知识类应用，旨在帮助红酒爱好者和初学者系统了解红酒的分类、品鉴技巧、产区知识和储存方法。应用以紫色为主色调，营造优雅高贵的红酒文化氛围。
应用涵盖了红葡萄酒、白葡萄酒、桃红葡萄酒、起泡酒、加强酒五大分类，收录了拉菲、奔富、唐培里侬等世界知名酒款信息。通过品酒小贴士、葡萄品种介绍、产区知识等模块，帮助用户全面提升红酒品鉴能力。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 红酒分类 | 五大酒类分类展示 | 横向滚动卡片 |
| 名酒库 | 知名酒款信息展示 | 列表+筛选 |
| 酒款详情 | 完整酒款信息 | 滚动页面 |
| 品鉴知识 | 葡萄品种、产区等知识 | 可展开卡片 |
| 筛选功能 | 按类型筛选酒款 | 标签筛选 |
1.3 红酒分类
| 序号 | 分类名称 | 特点描述 | 代表酒款 |
|---|---|---|---|
| 1 | 红葡萄酒 | 酒体饱满，单宁丰富 | 拉菲、奔富 |
| 2 | 白葡萄酒 | 清爽怡人，果香浓郁 | 长相思、霞多丽 |
| 3 | 桃红葡萄酒 | 色泽粉嫩，口感清新 | 普罗旺斯桃红 |
| 4 | 起泡酒 | 气泡细腻，欢庆首选 | 香槟、普罗塞克 |
| 5 | 加强酒 | 酒精度高，风味独特 | 波特、雪利 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.5 项目结构
lib/
└── main_wine_knowledge.dart
├── WineKnowledgeApp # 应用入口
├── Wine # 酒款数据模型
├── WineCategory # 分类数据模型
├── MainPage # 主页面（底部导航）
├── HomePage # 首页
├── WinesPage # 名酒库页面
├── WineDetailPage # 酒款详情页面
├── KnowledgePage # 知识页面
└── SettingsPage # 设置页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 数据流向图
三、核心模块设计
3.1 数据模型设计
3.1.1 酒款模型 (Wine)
class Wine {
final String id; // 唯一标识
final String name; // 酒款名称
final String origin; // 产地
final String type; // 类型
final String grape; // 葡萄品种
final int year; // 年份
final String description; // 描述
final String color; // 颜色
final double alcohol; // 酒精度
final List<String> tastingNotes; // 品鉴笔记
final String foodPairing; // 美食搭配
final String servingTemp; // 适饮温度
}
3.1.2 分类模型 (WineCategory)
class WineCategory {
final String name; // 分类名称
final String description; // 描述
final IconData icon; // 图标
final Color color; // 主题色
}
3.1.3 酒款分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 首页结构
3.2.3 酒款详情页结构
3.3 筛选功能设计
四、UI设计规范
4.1 配色方案
应用采用紫色为主色调，营造优雅高贵的红酒文化氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #9C27B0 (Purple) | 导航、强调元素 |
| 渐变起始 | #AB47BC (Purple 400) | 头部渐变 |
| 渐变结束 | #7B1FA2 (Purple 700) | 头部渐变 |
| 分类红 | #7B1FA2 | 红葡萄酒 |
| 分类白 | #FFCA28 | 白葡萄酒 |
| 分类桃红 | #F48FB1 | 桃红葡萄酒 |
| 分类起泡 | #4DD0E1 | 起泡酒 |
| 分类加强 | #F57C00 | 加强酒 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Medium | #000000 |
| 酒款名称 | 16px | Bold | #000000 |
| 酒款产地 | 13px | Regular | #757575 |
| 分类名称 | 14px | Bold | #FFFFFF |
| 品鉴笔记 | 13px | Regular | Purple 700 |
4.3 组件规范
4.3.1 分类卡片
┌─────────────────────┐
│ │
│ 🍷 │
│ │
│ 红葡萄酒 │
│ 酒体饱满，单宁丰富 │
│ │
└─────────────────────┘
4.3.2 酒款卡片
┌─────────────────────┐
│ ┌───────────────┐ │
│ │ │ │
│ │ 🍷 │ │
│ │ │ │
│ └───────────────┘ │
│ │
│ 拉菲古堡 │
│ 法国波尔多 │
│ │
│ [红葡萄酒] │
└─────────────────────┘
4.3.3 酒款列表项
┌─────────────────────────────────────────────────┐
│ ┌────┐ 拉菲古堡 2018 │
│ │ 🍷 │ 法国波尔多 │
│ │ │ 赤霞珠、梅洛 │
│ └────┘ [红葡萄酒] 🍷 13.5% > │
└─────────────────────────────────────────────────┘
五、核心功能实现
5.1 分类展示实现
Widget _buildCategoryCard(WineCategory category) {
return Container(
width: 140,
margin: const EdgeInsets.only(right: 12),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [category.color.withValues(alpha: 0.8), category.color],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
Icon(category.icon, color: Colors.white, size: 28),
Text(category.name, style: TextStyle(color: Colors.white)),
Text(category.description, style: TextStyle(color: Colors.white70)),
],
),
),
);
}
5.2 筛选功能实现
Widget _buildFilterBar() {
final types = ['全部', ...widget.categories.map((c) => c.name)];
return Container(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: types.length,
itemBuilder: (context, index) {
final isSelected = _selectedType == types[index];
return GestureDetector(
onTap: () {
setState(() {
_selectedType = types[index];
});
},
child: Container(
decoration: BoxDecoration(
color: isSelected ? Colors.purple : Colors.grey.shade100,
borderRadius: BorderRadius.circular(20),
),
child: Text(types[index]),
),
);
},
),
);
}
5.3 酒款详情页实现
Widget _buildTastingNotes() {
return Column(
children: [
Text('品鉴笔记', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
Wrap(
spacing: 8,
runSpacing: 8,
children: wine.tastingNotes.map((note) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.purple.shade50,
borderRadius: BorderRadius.circular(20),
),
child: Text(note, style: TextStyle(color: Colors.purple.shade700)),
);
}).toList(),
),
],
);
}
5.4 知识卡片实现
Widget _buildKnowledgeCard(
BuildContext context,
String title,
String subtitle,
IconData icon,
Color color,
List<String> items,
) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: ExpansionTile(
leading: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: color),
),
title: Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
subtitle: Text(subtitle),
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: items.map((item) {
return Row(
children: [
Icon(Icons.check_circle, size: 16, color: color),
SizedBox(width: 8),
Expanded(child: Text(item)),
],
);
}).toList(),
),
),
],
),
);
}
5.5 品酒贴士实现
Widget _buildQuickTips() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.purple.shade50, Colors.purple.shade100],
),
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: [
_buildTipItem(Icons.visibility, '观色', '倾斜酒杯，观察酒的色泽和透明度'),
_buildTipItem(Icons.air, '闻香', '轻轻摇晃酒杯，感受香气的层次'),
_buildTipItem(Icons.restaurant, '品味', '小口品尝，让酒液在口中停留'),
],
),
);
}
六、交互设计
6.1 筛选交互流程
6.2 详情页导航
6.3 知识卡片展开
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 搜索功能
增强查找能力：
- 按酒款名称搜索
- 按产区搜索
- 按葡萄品种搜索
7.2.2 收藏功能
个人收藏管理：
- 收藏喜欢的酒款
- 创建收藏夹
- 分享收藏列表
7.2.3 酒评功能
用户互动：
- 撰写酒评
- 评分系统
- 评论互动
八、注意事项
8.1 开发注意事项
-
数据模型：Wine模型包含完整的酒款信息
-
筛选逻辑：使用where方法过滤列表
-
导航传参：详情页通过构造函数接收Wine对象
-
可展开卡片：使用ExpansionTile组件
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 筛选不生效 | 状态未更新 | 调用setState刷新 |
| 详情页空白 | 数据未传递 | 检查构造函数参数 |
| 卡片无法展开 | ExpansionTile配置错误 | 检查children属性 |
| 颜色显示异常 | Color类型错误 | 使用withValues方法 |
8.3 使用提示
🍷 红酒品鉴小贴士 🍷
观色：倾斜酒杯45度，观察酒的色泽和清澈度。
闻香：轻轻摇晃酒杯，让香气充分释放。
品味：小口品尝，让酒液在口中停留10-15秒。
回味：吞咽后感受余韵的长短和变化。
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_wine_knowledge.dart --web-port 8095
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_wine_knowledge.dart
# 运行到Windows
flutter run -d windows -t lib/main_wine_knowledge.dart
# 代码分析
flutter analyze lib/main_wine_knowledge.dart
十、总结
红酒知识应用通过系统化的红酒知识展示，为红酒爱好者提供了一个便捷的学习平台。应用涵盖了五大红酒分类，收录了拉菲、奔富、唐培里侬等世界知名酒款信息，帮助用户全面了解红酒文化。
核心功能涵盖分类展示、名酒库、酒款详情、知识模块四大模块。分类展示以横向滚动卡片形式呈现五大酒类；名酒库支持按类型筛选，列表展示酒款基本信息；酒款详情页完整呈现酒款信息，包括品鉴笔记和美食搭配；知识模块通过可展开卡片展示葡萄品种、产区介绍、品鉴技巧和储存方法。
应用采用Material Design 3设计规范，以紫色为主色调，界面优雅高贵。通过本应用，希望能够帮助用户提升红酒品鉴能力，感受红酒文化的魅力。
品味红酒，享受生活
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)