Flutter 框架跨平台鸿蒙开发 - 气味图书馆应用
摘要：气味图书馆应用开发方案 气味图书馆是一款基于Flutter框架开发的创意应用，通过虚拟气味唤起用户美好回忆。应用采用粉色主色调设计，包含四大功能模块：气味浏览（分类展示自然、美食、时光等6类气味）、闻嗅体验（模拟气味感知动画）、收藏管理（创建个性化气味合集）和最爱收藏。技术实现上使用Material Design 3规范，支持鸿蒙OS/Web多平台，通过状态管理和动画控制器提升交互体验。项目
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
气味图书馆是一款创意体验应用，收集各种气味（比如雨后的泥土、妈妈做的菜、旧书的味道），用手机"闻"到这些气味，唤起美好回忆。应用涵盖自然气息、美食记忆、时光印记等多种气味分类，让用户在虚拟的气味世界中重温美好时光。
应用以浪漫的粉色为主色调，象征美好与温馨的记忆。涵盖气味浏览、收藏集管理、最爱收藏、关于信息四大模块。用户可以浏览气味、闻嗅体验、收藏整理、创建合集，沉浸式感受气味带来的情感共鸣。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 气味浏览 | 分类浏览各种气味 | 列表展示 |
| 闻嗅体验 | 模拟闻嗅气味过程 | 进度动画 |
| 收藏管理 | 创建管理收藏集 | 弹窗表单 |
| 最爱收藏 | 收藏喜欢的气味 | 列表存储 |
| 气味详情 | 查看气味详细信息 | 卡片展示 |
| 记忆故事 | 气味背后的故事 | 文字描述 |
1.3 气味分类定义
| 序号 | 分类名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 自然气息 | 🌿 | 来自大自然的芬芳 |
| 2 | 美食记忆 | 🍳 | 舌尖上的美好回忆 |
| 3 | 时光印记 | 📚 | 岁月沉淀的味道 |
| 4 | 四季流转 | 🌸 | 春夏秋冬的气息 |
| 5 | 情感味道 | 💝 | 爱与温暖的气息 |
| 6 | 旅途芬芳 | ✈️ | 行走中的气味记忆 |
1.4 气味浓度定义
| 序号 | 浓度名称 | Emoji | 数值 | 描述 |
|---|---|---|---|---|
| 1 | 淡雅 | 🍃 | 0.3 | 清新淡雅 |
| 2 | 适中 | 🌺 | 0.6 | 浓度适中 |
| 3 | 浓郁 | 🌹 | 0.9 | 香气浓郁 |
| 4 | 浓烈 | 🔥 | 1.0 | 气味浓烈 |
1.5 情绪类型定义
| 序号 | 情绪名称 | Emoji | 颜色 | 描述 |
|---|---|---|---|---|
| 1 | 愉悦 | 😊 | #FFEB3B | 开心快乐 |
| 2 | 平静 | 😌 | #81C784 | 宁静安详 |
| 3 | 怀念 | 🥺 | #B39DDB | 怀旧感伤 |
| 4 | 浪漫 | 🥰 | #F48FB1 | 甜蜜浪漫 |
| 5 | 活力 | 🤩 | #FF7043 | 充满活力 |
| 6 | 温馨 | 🥰 | #FFB74D | 温暖舒适 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画效果 | AnimationController | - |
| 状态管理 | StatefulWidget | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_scent_library.dart
├── ScentLibraryApp # 应用入口
├── ScentCategory # 气味分类枚举
├── ScentIntensity # 气味浓度枚举
├── MoodType # 情绪类型枚举
├── Scent # 气味模型
├── ScentCollection # 收藏集模型
├── ScentLibraryHomePage # 主页面（底部导航）
├── _buildLibraryPage # 气味页面
├── _buildCollectionsPage # 收藏集页面
├── _buildFavoritesPage # 最爱页面
└── _buildProfilePage # 关于页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 闻嗅体验流程
三、核心模块设计
3.1 数据模型设计
3.1.1 气味分类枚举 (ScentCategory)
enum ScentCategory {
nature(label: '自然气息', emoji: '🌿', description: '来自大自然的芬芳'),
food(label: '美食记忆', emoji: '🍳', description: '舌尖上的美好回忆'),
memory(label: '时光印记', emoji: '📚', description: '岁月沉淀的味道'),
season(label: '四季流转', emoji: '🌸', description: '春夏秋冬的气息'),
emotion(label: '情感味道', emoji: '💝', description: '爱与温暖的气息'),
travel(label: '旅途芬芳', emoji: '✈️', description: '行走中的气味记忆');
final String label;
final String emoji;
final String description;
}
3.1.2 气味浓度枚举 (ScentIntensity)
enum ScentIntensity {
light(label: '淡雅', emoji: '🍃', value: 0.3),
moderate(label: '适中', emoji: '🌺', value: 0.6),
strong(label: '浓郁', emoji: '🌹', value: 0.9),
intense(label: '浓烈', emoji: '🔥', value: 1.0);
final String label;
final String emoji;
final double value;
}
3.1.3 气味模型 (Scent)
class Scent {
final String id; // 气味ID
final String name; // 气味名称
final ScentCategory category; // 气味分类
final ScentIntensity intensity; // 气味浓度
final String description; // 气味描述
final List<String> notes; // 香调笔记
final List<MoodType> moods; // 关联情绪
final String memory; // 记忆故事
final DateTime createdAt; // 创建时间
final int collectCount; // 收藏数
final double rating; // 评分
final String? imageUrl; // 图片地址
}
3.1.4 收藏集模型 (ScentCollection)
class ScentCollection {
final String id; // 收藏集ID
final String name; // 收藏集名称
final List<Scent> scents; // 气味列表
final DateTime createdAt; // 创建时间
final String description; // 描述
}
3.1.5 气味分类分布
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 | 最爱页面 |
| 强调色 | #F8BBD9 | 关于页面 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 气味卡片 |
4.2 情绪颜色定义
| 情绪 | 色值 | 视觉效果 |
|---|---|---|
| 愉悦 | #FFEB3B | 黄色明亮 |
| 平静 | #81C784 | 绿色宁静 |
| 怀念 | #B39DDB | 紫色温柔 |
| 浪漫 | #F48FB1 | 粉色甜蜜 |
| 活力 | #FF7043 | 橙色活力 |
| 温馨 | #FFB74D | 橙黄温暖 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 气味名称 | 16px | Bold | #000000 |
| 描述文字 | 13px | Regular | 灰色 |
| 香调标签 | 11px | Regular | 黑色 |
| 统计数字 | 20px | Bold | 白色 |
4.4 组件规范
4.4.1 气味卡片
┌─────────────────────────────────────┐
│ 🌿 雨后泥土 [🌺 适中] │
│ 雨后大地的芬芳，湿润的泥土气息 │
│ ⭐4.8 │
│ 256人收藏 │
└─────────────────────────────────────┘
4.4.2 气味详情卡片
┌─────────────────────────────────────┐
│ ┌────────┐ 雨后泥土 │
│ │ 🌿 │ 🌿 自然气息 · 🌺 适中 │
│ └────────┘ ⭐⭐⭐⭐⭐ 4.8 │
│ │
│ 雨后大地的芬芳，湿润的泥土气息， │
│ 带着青草的清香 │
│ │
│ [湿润泥土] [青草香] [清新空气] │
│ │
│ ╭──────────────╮ │
│ ╱ 进度环 80% ╲ │
│ │ ┌──────┐ │ │
│ │ │ 👃 │ │ │
│ │ │闻一闻│ │ │
│ │ └──────┘ │ │
│ ╲ ╱ │
│ ╰──────────────╯ │
│ │
│ 📖 小时候在乡下，每逢下雨后... │
└─────────────────────────────────────┘
4.4.3 分类网格
┌─────────────────────────────────────┐
│ 🌿 🍳 📚 │
│ 自然气息 美食记忆 时光印记 │
│ 2种 2种 1种 │
│ │
│ 🌸 💝 ✈️ │
│ 四季流转 情感味道 旅途芬芳 │
│ 2种 1种 1种 │
└─────────────────────────────────────┘
4.4.4 收藏集卡片
┌─────────────────────────────────────┐
│ ┌────────┐ 童年记忆 │
│ │ 3 │ 那些年最珍贵的味道 │
│ └────────┘ │
│ │
│ [🌿 雨后泥土] [🍳 妈妈的红烧肉] │
│ [📚 旧书墨香] │
└─────────────────────────────────────┘
五、核心功能实现
5.1 气味选择实现
void _selectScent(Scent scent) {
setState(() {
_currentScent = scent;
_isSmelling = false;
_smellProgress = 0.0;
});
}
5.2 闻嗅体验实现
void _startSmelling() {
if (_currentScent == null) return;
setState(() {
_isSmelling = true;
_smellProgress = 0.0;
});
_smellController.reset();
_smellController.forward();
Timer.periodic(const Duration(milliseconds: 50), (timer) {
setState(() {
_smellProgress += 0.02;
if (_smellProgress >= 1.0) {
_smellProgress = 1.0;
_isSmelling = false;
timer.cancel();
_showSmellComplete();
}
});
});
}
5.3 收藏功能实现
void _addToFavorite(Scent scent) {
if (!_favoriteScents.any((s) => s.id == scent.id)) {
setState(() {
_favoriteScents.add(scent);
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('已添加到收藏')),
);
}
}
5.4 创建收藏集实现
void _createCollection(String name, String description) {
final collection = ScentCollection(
id: 'col_${DateTime.now().millisecondsSinceEpoch}',
name: name,
scents: [],
description: description,
);
setState(() {
_collections.insert(0, collection);
});
}
5.5 分类统计实现
Widget _buildCategoryGrid() {
return GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 1.2,
),
itemCount: ScentCategory.values.length,
itemBuilder: (context, index) {
final category = ScentCategory.values[index];
final count = _scents.where((s) => s.category == category).length;
return CategoryCard(category: category, count: count);
},
);
}
六、交互设计
6.1 气味体验流程
6.2 收藏集管理流程
6.3 最爱管理流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 真实气味设备
设备功能：
- 蓝牙气味设备连接
- 气味胶囊管理
- 气味强度控制
- 设备状态监控
7.2.2 社区分享
分享功能：
- 气味故事分享
- 评论互动
- 收藏集公开
- 气味推荐
7.2.3 智能推荐
推荐功能：
- 基于情绪推荐
- 基于场景推荐
- 基于季节推荐
- 个性化推荐
八、注意事项
8.1 开发注意事项
-
情感体验：气味描述需注重情感共鸣
-
动画流畅：闻嗅动画需流畅自然
-
状态管理：收藏状态需正确同步
-
定时器管理：Timer需在组件销毁时取消
-
用户体验：提供清晰的视觉反馈
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 动画卡顿 | 刷新频率高 | 优化动画帧率 |
| 收藏不显示 | 列表未更新 | 检查setState |
| 进度不更新 | Timer未启动 | 检查定时器 |
| 气味不切换 | 状态未重置 | 检查状态管理 |
| 收藏集为空 | 数据未加载 | 检查数据初始化 |
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_scent_library.dart --web-port 8144
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_scent_library.dart
# 代码分析
flutter analyze lib/main_scent_library.dart
十、总结
气味图书馆应用通过气味浏览、收藏集管理、最爱收藏、关于信息四大模块，为用户提供了一个独特的气味记忆体验平台。应用支持6种气味分类、4种浓度等级、6种情绪类型，让用户在虚拟的气味世界中重温美好时光。
核心功能涵盖气味浏览、闻嗅体验、收藏管理、记忆故事四大模块。气味分类从自然气息到旅途芬芳，覆盖生活的方方面面；浓度等级从淡雅到浓烈，满足不同偏好；情绪类型从愉悦到温馨，唤起各种情感共鸣。
应用采用 Material Design 3 设计规范，以浪漫的粉色为主色调，象征美好与温馨的记忆。通过本应用，希望能够帮助用户记录和重温气味带来的美好回忆，在气味的世界中找到情感的寄托。
气味图书馆——用气味唤起美好回忆
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
5
0- 0
已为社区贡献18条内容
所有评论(0)