鸿蒙flutter第三方库适配 - 收藏管理应用
运行效果图应用以粉色为主色调，象征热爱与珍藏。序号分类名称Emoji颜色描述1文章📄蓝色文章、博客、教程2视频🎬红色视频、电影、课程3音乐🎵紫色音乐、播客、有声书4图片🖼️绿色图片、设计、灵感5网站🌐橙色网站、工具、资源6商品🛍️粉色商品、购物、心愿单7书籍📚棕色书籍、文档、资料8其他📌灰色应用采用 Material Design 3 设计规范，以粉色为主色调，象征热爱与珍藏。
·
收藏管理应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
适配的第三方库地址：
- shared_preferences: https://pub.dev/packages/shared_preferences
- animations: https://pub.dev/packages/animations
- quick_actions: https://pub.dev/packages/quick_actions
- file_selector: https://pub.dev/packages/file_selector
一、项目概述
运行效果图
1.1 应用简介
收藏管理应用是一款功能完善的个人收藏管理工具，帮助用户高效管理各类收藏内容。应用支持文章、视频、音乐、图片、网站、商品、书籍等多种收藏类型，提供分类管理、标签系统、搜索过滤、统计分析等功能，让收藏内容井井有条。
应用以粉色为主色调，象征热爱与珍藏。涵盖全部收藏、分类管理、统计分析、系统设置四大模块。用户可以轻松添加、编辑、搜索和管理各类收藏，查看收藏统计数据，实现高效的个人信息管理。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 收藏管理 | 添加、编辑、删除收藏 | 状态管理 |
| 分类管理 | 按类型组织收藏 | 枚举分类 |
| 标签系统 | 自定义标签分类 | 标签列表 |
| 搜索过滤 | 关键词搜索和筛选 | 过滤算法 |
| 统计分析 | 收藏数据可视化 | 图表展示 |
| 收藏标记 | 标记重要收藏 | 收藏状态 |
| 浏览统计 | 记录浏览次数 | 计数器 |
| 数据导入导出 | 备份和恢复数据 | 文件操作 |
1.3 收藏分类定义
| 序号 | 分类名称 | Emoji | 颜色 | 描述 |
|---|---|---|---|---|
| 1 | 文章 | 📄 | 蓝色 | 文章、博客、教程 |
| 2 | 视频 | 🎬 | 红色 | 视频、电影、课程 |
| 3 | 音乐 | 🎵 | 紫色 | 音乐、播客、有声书 |
| 4 | 图片 | 🖼️ | 绿色 | 图片、设计、灵感 |
| 5 | 网站 | 🌐 | 橙色 | 网站、工具、资源 |
| 6 | 商品 | 🛍️ | 粉色 | 商品、购物、心愿单 |
| 7 | 书籍 | 📚 | 棕色 | 书籍、文档、资料 |
| 8 | 其他 | 📌 | 灰色 | 其他类型收藏 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | ChangeNotifier | - |
| 数据存储 | SharedPreferences | >= 2.0.0 |
| 动画效果 | AnimatedContainer | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.5 项目结构
lib/
└── main_collection_manager.dart
├── CollectionCategory # 收藏分类枚举
├── CollectionItem # 收藏项模型
├── CollectionState # 收藏状态管理
├── CollectionManagerApp # 应用入口
├── CollectionHomePage # 主页面（底部导航）
├── _buildAllCollectionsPage # 全部收藏页
├── _buildCategoriesPage # 分类管理页
├── _buildStatisticsPage # 统计分析页
├── _buildSettingsPage # 设置页
├── _AddCollectionSheet # 添加收藏弹窗
├── _ItemDetailSheet # 收藏详情弹窗
└── PieChartPainter # 饼图绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 收藏管理流程
三、核心模块设计
3.1 数据模型设计
3.1.1 收藏分类枚举 (CollectionCategory)
enum CollectionCategory {
article(label: '文章', emoji: '📄', color: Colors.blue),
video(label: '视频', emoji: '🎬', color: Colors.red),
music(label: '音乐', emoji: '🎵', color: Colors.purple),
image(label: '图片', emoji: '🖼️', color: Colors.green),
website(label: '网站', emoji: '🌐', color: Colors.orange),
product(label: '商品', emoji: '🛍️', color: Colors.pink),
book(label: '书籍', emoji: '📚', color: Colors.brown),
other(label: '其他', emoji: '📌', color: Colors.grey);
final String label;
final String emoji;
final Color color;
const CollectionCategory({
required this.label,
required this.emoji,
required this.color,
});
}
3.1.2 收藏项模型 (CollectionItem)
class CollectionItem {
final String id;
final String title;
final String? description;
final String? url;
final CollectionCategory category;
final List<String> tags;
final DateTime createdAt;
final DateTime? updatedAt;
final bool isFavorite;
final int viewCount;
const CollectionItem({
required this.id,
required this.title,
this.description,
this.url,
required this.category,
this.tags = const [],
required this.createdAt,
this.updatedAt,
this.isFavorite = false,
this.viewCount = 0,
});
}
3.1.3 收藏分类分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 全部收藏页结构
3.2.3 分类管理页结构
3.3 搜索过滤逻辑
3.4 统计分析逻辑
四、UI设计规范
4.1 配色方案
应用以粉色为主色调，象征热爱与珍藏：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #E91E63 (Pink) | 导航、主题元素 |
| 辅助色 | #F48FB1 | 选中状态 |
| 第三色 | #FCE4EC | 悬停状态 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 信息卡片 |
| 文章分类 | #2196F3 | 蓝色 |
| 视频分类 | #F44336 | 红色 |
| 音乐分类 | #9C27B0 | 紫色 |
4.2 分类配色
| 分类 | 色值 | 视觉效果 |
|---|---|---|
| 文章 | #2196F3 | 蓝色 |
| 视频 | #F44336 | 红色 |
| 音乐 | #9C27B0 | 紫色 |
| 图片 | #4CAF50 | 绿色 |
| 网站 | #FF9800 | 橙色 |
| 商品 | #E91E63 | 粉色 |
| 书籍 | #795548 | 棕色 |
| 其他 | #9E9E9E | 灰色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 收藏标题 | 16px | Bold | #000000 |
| 分类标签 | 12px | Regular | 分类颜色 |
| 描述文字 | 14px | Regular | #666666 |
| 时间显示 | 12px | Regular | #999999 |
| 标签文字 | 10px | Regular | #666666 |
4.4 组件规范
4.4.1 收藏卡片
┌─────────────────────────────────────┐
│ 📄 Flutter开发指南 ❤️ ⋮│
│ 文章 │
│ │
│ Flutter官方开发文档和最佳实践 │
│ │
│ 🕐 7天前 👁 15 🔗 flutter.dev │
│ │
│ #Flutter #开发 #教程 │
└─────────────────────────────────────┘
4.4.2 分类卡片
┌─────────────────────┐
│ 📄 30 │
│ │
│ 文章 │
│ 30 个收藏 │
└─────────────────────┘
4.4.3 统计概览
┌─────────────────────────────────────┐
│ 收藏概览 │
│ │
│ 📚 ❤️ 👁️ │
│ 50 12 156 │
│ 总收藏 已收藏 总浏览 │
└─────────────────────────────────────┘
4.4.4 添加收藏弹窗
┌─────────────────────────────────────┐
│ 取消 添加收藏 保存 │
│─────────────────────────────────────│
│ 标题 * │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 分类 │
│ ┌─────────────────────────────┐ │
│ │ 📌 其他 ▼ │ │
│ └─────────────────────────────┘ │
│ │
│ 描述 │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 🔗 链接 │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 🏷️ 标签 │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ ❤️ 添加到收藏 [开关] │
└─────────────────────────────────────┘
五、核心功能实现
5.1 状态管理实现
class CollectionState extends ChangeNotifier {
final List<CollectionItem> _items = [];
String _searchQuery = '';
CollectionCategory? _selectedCategory;
String _sortBy = 'createdAt';
bool _sortAscending = false;
List<CollectionItem> _filterAndSortItems() {
var filtered = List<CollectionItem>.from(_items);
if (_searchQuery.isNotEmpty) {
final query = _searchQuery.toLowerCase();
filtered = filtered.where((item) {
return item.title.toLowerCase().contains(query) ||
(item.description?.toLowerCase().contains(query) ?? false) ||
item.tags.any((tag) => tag.toLowerCase().contains(query));
}).toList();
}
if (_selectedCategory != null) {
filtered = filtered.where((item) =>
item.category == _selectedCategory).toList();
}
filtered.sort((a, b) {
// 排序逻辑
});
return filtered;
}
void addItem(CollectionItem item) {
_items.add(item);
notifyListeners();
}
}
5.2 搜索过滤实现
void setSearchQuery(String query) {
_searchQuery = query;
notifyListeners();
}
void setSelectedCategory(CollectionCategory? category) {
_selectedCategory = category;
notifyListeners();
}
void setSortBy(String sortBy) {
if (_sortBy == sortBy) {
_sortAscending = !_sortAscending;
} else {
_sortBy = sortBy;
_sortAscending = true;
}
notifyListeners();
}
5.3 收藏卡片实现
Widget _buildCollectionCard(BuildContext context, CollectionItem item) {
return Card(
margin: const EdgeInsets.only(bottom: 8),
child: InkWell(
onTap: () {
_collectionState.incrementViewCount(item.id);
_showItemDetail(context, item);
},
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: item.category.color, width: 4),
),
),
child: Column(
children: [
// 标题和分类
Row(
children: [
Container(
decoration: BoxDecoration(
color: item.category.color.withOpacity(0.1),
),
child: Text(item.category.emoji),
),
Text(item.title),
if (item.isFavorite) Icon(Icons.favorite),
],
),
// 描述
if (item.description != null) Text(item.description!),
// 元信息
Row(
children: [
Icon(Icons.access_time),
Text(_formatDate(item.createdAt)),
Icon(Icons.visibility),
Text('${item.viewCount}'),
],
),
// 标签
Wrap(
children: item.tags.map((tag) =>
Chip(label: Text('#$tag'))).toList(),
),
],
),
),
),
);
}
5.4 统计图表实现
class PieChartPainter extends CustomPainter {
final Map<CollectionCategory, int> stats;
final int total;
void paint(Canvas canvas, Size size) {
if (total == 0) return;
final center = Offset(size.width / 2, size.height / 2);
final radius = min(size.width, size.height) / 2 - 20;
final rect = Rect.fromCircle(center: center, radius: radius);
double startAngle = -pi / 2;
for (var category in CollectionCategory.values) {
final count = stats[category] ?? 0;
if (count == 0) continue;
final sweepAngle = (count / total) * 2 * pi;
final paint = Paint()
..color = category.color
..style = PaintingStyle.fill;
canvas.drawArc(rect, startAngle, sweepAngle, true, paint);
startAngle += sweepAngle;
}
}
}
六、交互设计
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 使用技巧
📚 收藏管理应用技巧 📚
收藏管理
- 使用分类组织收藏
- 添加标签便于搜索
- 定期清理无用收藏
- 标记重要收藏
搜索技巧
- 使用关键词搜索
- 结合分类筛选
- 利用标签过滤
- 选择合适排序
数据维护
- 定期备份数据
- 清理重复收藏
- 更新过期链接
- 整理标签分类
九、鸿蒙Flutter适配说明
9.1 适配要点
| 适配项 | 说明 | 状态 |
|---|---|---|
| 基础UI组件 | 使用Material Design 3 | ✅ 已适配 |
| 状态管理 | ChangeNotifier模式 | ✅ 已适配 |
| 数据存储 | SharedPreferences | ✅ 已适配 |
| 动画效果 | AnimatedContainer等 | ✅ 已适配 |
| 文件操作 | file_selector插件 | ⚠️ 需验证 |
9.2 权限配置
在鸿蒙OS上运行需要配置以下权限：
{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
},
{
"name": "ohos.permission.GET_NETWORK_INFO"
},
{
"name": "ohos.permission.READ_MEDIA"
},
{
"name": "ohos.permission.WRITE_MEDIA"
}
]
}
}
9.3 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_collection_manager.dart --web-port 8154
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_collection_manager.dart
# 代码分析
flutter analyze lib/main_collection_manager.dart
十、总结
收藏管理应用是一款功能完善的个人收藏管理工具，支持文章、视频、音乐、图片、网站、商品、书籍、其他八大收藏类型。应用提供分类管理、标签系统、搜索过滤、统计分析、收藏标记、浏览统计、数据导入导出等核心功能，帮助用户高效管理各类收藏内容。
应用采用 Material Design 3 设计规范，以粉色为主色调，象征热爱与珍藏。通过本应用，用户可以轻松添加、编辑、搜索和管理各类收藏，查看收藏统计数据，实现高效的个人信息管理。
收藏管理应用——珍藏每一份美好
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献21条内容
所有评论(0)