Flutter 框架跨平台鸿蒙开发 - 旧物改造灵感库应用
摘要: 旧物改造灵感库是一款倡导环保的生活创意应用,通过AI智能推荐帮助用户将旧物变废为宝。核心功能包括拍照上传旧物、获取改造灵感、收藏管理及项目进度跟踪。应用采用模块化设计,包含详细的数据模型(旧物类型、改造风格、难度等级等)和交互流程,界面以青绿色调为主,突出环保理念。用户可记录改造过程,分享创意成果,实现资源再利用与创意激发。 关键词: 旧物改造、环保应用、AI推荐、跨平台开发
·
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、应用概述
运行效果图




旧物改造灵感库是一款生活创意类应用,用户看到家里的旧东西不知道怎么处理时,只需拍照上传,AI就能给出旧物改造灵感,让旧物变废为宝。倡导环保理念,激发创意潜能,让每一件旧物都能焕发新生。
核心价值
| 维度 | 描述 |
|---|---|
| 环保理念 | 减少资源浪费,践行可持续生活方式 |
| 创意激发 | 提供丰富的改造灵感,激发用户创造力 |
| 实用指导 | 详细的步骤教程,让改造变得简单易学 |
| 成就分享 | 记录改造历程,分享创意成果 |
二、功能架构
三、数据模型设计
3.1 旧物类型枚举
| 类型 | 标签 | 图标 | 颜色值 |
|---|---|---|---|
| clothing | 衣物 | checkroom | #EC407A |
| furniture | 家具 | chair | #8D6E63 |
| electronics | 电子产品 | devices | #42A5F5 |
| books | 书籍 | menu_book | #66BB6A |
| containers | 容器 | inventory_2 | #FFCA28 |
| fabric | 布料 | texture | #AB47BC |
| paper | 纸张 | description | #78909C |
| plastic | 塑料 | water_drop | #26C6DA |
| metal | 金属 | build | #90A4AE |
| wood | 木材 | forest | #6D4C41 |
3.2 改造风格枚举
| 风格 | 标签 | 图标 | 颜色值 |
|---|---|---|---|
| vintage | 复古风 | history | #8D6E63 |
| modern | 现代简约 | square | #607D8B |
| rustic | 田园风 | grass | #66BB6A |
| artistic | 艺术创意 | palette | #E91E63 |
| practical | 实用主义 | build_circle | #FF9800 |
| minimalist | 极简风 | minimize | #9E9E9E |
| bohemian | 波西米亚 | auto_awesome | #AB47BC |
| industrial | 工业风 | factory | #455A64 |
3.3 难度等级枚举
| 等级 | 标签 | 图标 | 颜色值 | 预计时长 |
|---|---|---|---|---|
| easy | 简单 | star_border | #66BB6A | 1-2小时 |
| medium | 中等 | star_half | #FFCA28 | 3-5小时 |
| hard | 困难 | star | #EF5350 | 6小时以上 |
3.4 项目状态枚举
| 状态 | 标签 | 图标 | 颜色值 |
|---|---|---|---|
| draft | 草稿 | edit_note | #9E9E9E |
| inProgress | 进行中 | pending | #42A5F5 |
| completed | 已完成 | check_circle | #66BB6A |
| shared | 已分享 | share | #FF7043 |
3.5 旧物模型
class UpcycleMaterial {
final String id; // 旧物ID
final String name; // 名称
final ItemType type; // 类型
final String? description; // 描述
final String? imagePath; // 图片路径
final DateTime createdAt; // 创建时间
}
3.6 改造步骤模型
class UpcycleStep {
final int stepNumber; // 步骤编号
final String title; // 步骤标题
final String description; // 步骤描述
final int? durationMinutes; // 预计时间
final List<String> tips; // 小贴士
}
3.7 改造灵感模型
class UpcycleIdea {
final String id; // 灵感ID
final String title; // 标题
final String description; // 描述
final ItemType itemType; // 旧物类型
final UpcycleStyle style; // 改造风格
final DifficultyLevel difficulty; // 难度等级
final List<String> materials; // 所需材料
final List<String> tools; // 所需工具
final List<UpcycleStep> steps; // 制作步骤
final List<String> tags; // 标签
final double rating; // 评分
final int likeCount; // 点赞数
final int saveCount; // 收藏数
final String? coverImage; // 封面图
final String? author; // 作者
}
3.8 我的项目模型
class MyProject {
final String id; // 项目ID
final UpcycleIdea idea; // 关联灵感
final DateTime startedAt; // 开始时间
final DateTime? completedAt; // 完成时间
final ProjectStatus status; // 项目状态
final List<String> myNotes; // 我的笔记
final String? myImage; // 我的作品图
}
四、界面设计
4.1 整体布局
应用采用底部标签导航结构,包含四个主要页面:
4.2 配色方案
应用采用青绿色调主题,营造环保、自然的氛围:
| 元素 | 颜色值 | 用途 |
|---|---|---|
| Primary | #26A69A | 主色调,环保青 |
| Secondary | #FF7043 | 辅助色,活力橙 |
| Tertiary | #AB47BC | 点缀色,创意紫 |
| Background | #0A0E14 | 背景色,深邃黑 |
| Surface | #1A1A2E | 卡片背景 |
4.3 核心组件
旧物卡片组件
每个旧物卡片展示:
- 旧物类型图标与颜色
- 旧物名称
- 添加时间
- 删除按钮
灵感卡片组件
每个灵感卡片展示:
- 旧物类型图标
- 灵感标题与描述
- 改造风格、难度、时长
- 点赞数与收藏数
- 标签列表
- 收藏按钮
灵感详情弹窗
点击灵感卡片后展示:
- 标题与描述
- 风格、难度、时长
- 所需材料列表
- 所需工具列表
- 制作步骤详情
- 开始制作按钮
五、核心功能实现
5.1 旧物添加流程
5.2 智能推荐算法
void _generateRecommendations() {
if (_myMaterials.isEmpty) {
_recommendedIdeas.clear();
_recommendedIdeas.addAll(_allIdeas.take(4));
return;
}
final myTypes = _myMaterials.map((m) => m.type).toSet();
final matched = _allIdeas.where((idea) => myTypes.contains(idea.itemType)).toList();
_recommendedIdeas.clear();
if (matched.isNotEmpty) {
_recommendedIdeas.addAll(matched);
} else {
_recommendedIdeas.addAll(_allIdeas.take(4));
}
}
5.3 推荐匹配流程
5.4 项目开始流程
六、状态管理
6.1 主页状态
class _UpcycleIdeasHomePageState extends State<UpcycleIdeasHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final List<UpcycleMaterial> _myMaterials = [];
final List<UpcycleIdea> _allIdeas = [];
final List<UpcycleIdea> _recommendedIdeas = [];
final List<UpcycleIdea> _savedIdeas = [];
final List<MyProject> _myProjects = [];
int _totalIdeas = 0;
int _totalSaved = 0;
int _totalProjects = 0;
}
6.2 数据更新方法
void _addMaterial(String name, ItemType type) {
setState(() {
_myMaterials.insert(0, UpcycleMaterial(
id: DateTime.now().millisecondsSinceEpoch.toString(),
name: name,
type: type,
createdAt: DateTime.now(),
));
});
_generateRecommendations();
}
void _toggleSave(UpcycleIdea idea) {
setState(() {
final index = _savedIdeas.indexWhere((i) => i.id == idea.id);
if (index != -1) {
_savedIdeas.removeAt(index);
} else {
_savedIdeas.insert(0, idea);
}
_updateStatistics();
});
}
七、技术实现细节
7.1 依赖配置
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
environment:
sdk: '>=3.0.0 <4.0.0'
7.2 主题配置
ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorScheme: ColorScheme.dark(
primary: const Color(0xFF26A69A),
secondary: const Color(0xFFFF7043),
tertiary: const Color(0xFFAB47BC),
surface: const Color(0xFF1A1A2E),
background: const Color(0xFF0D1B2A),
),
)
九、扩展功能规划
9.1 短期规划
| 功能 | 描述 | 优先级 |
|---|---|---|
| AI识别 | 拍照自动识别旧物类型 | 高 |
| 数据持久化 | 本地存储旧物与项目数据 | 高 |
| 图片上传 | 支持上传旧物和作品图片 | 中 |
| 社区分享 | 分享作品到社区 | 中 |
9.2 中期规划
| 功能 | 描述 | 优先级 |
|---|---|---|
| 视频教程 | 集成改造视频教程 | 中 |
| 材料商城 | 推荐改造所需材料购买 | 中 |
| 用户社区 | 用户交流互动平台 | 低 |
| 成就系统 | 完成项目获得成就徽章 | 低 |
9.3 长期规划
| 功能 | 描述 | 优先级 |
|---|---|---|
| AR预览 | AR预览改造效果 | 低 |
| 专业指导 | 专业设计师在线指导 | 低 |
| 环保积分 | 改造获得环保积分奖励 | 低 |
十、项目结构
lib/
├── main_upcycle_ideas.dart # 应用入口
│ ├── UpcycleIdeasApp # 应用配置
│ ├── UpcycleIdeasHomePage # 主页面
│ ├── _UploadTab # 上传旧物页
│ ├── _IdeasTab # 灵感推荐页
│ ├── _SavedTab # 收藏管理页
│ ├── _MyProjectsTab # 我的项目页
│ └── _IdeaCard # 灵感卡片组件
│
├── models/
│ ├── upcycle_material.dart # 旧物模型
│ ├── upcycle_idea.dart # 灵感模型
│ ├── upcycle_step.dart # 步骤模型
│ └── my_project.dart # 项目模型
│
├── enums/
│ ├── item_type.dart # 旧物类型枚举
│ ├── upcycle_style.dart # 改造风格枚举
│ ├── difficulty_level.dart # 难度等级枚举
│ └── project_status.dart # 项目状态枚举
│
└── utils/
└── recommendation_utils.dart # 推荐算法工具
十一、开发说明
11.1 运行方式
# 获取依赖
flutter pub get
# 运行应用
flutter run -d <device_id>
# 指定入口文件运行
flutter run -d <device_id> -t lib/main_upcycle_ideas.dart
11.2 注意事项
- 类型匹配:当前使用旧物类型与灵感类型匹配,后续可优化为多维度匹配
- 数据存储:当前版本使用内存存储,重启后数据丢失
- 图片功能:拍照上传功能需要相机权限,当前为占位实现
- AI识别:实际应用需接入图像识别API
十二、开源社区
本项目基于 Flutter 框架开发,支持多平台部署。
开源鸿蒙社区: https://openharmonycrossplatform.csdn.net
欢迎开发者参与贡献,共同完善旧物改造灵感库应用的功能与体验。
变废为宝,创意无限
Upcycle Ideas - Turn Old into Gold
更多推荐



所有评论(0)