手工作品展示应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
手工作品展示是一款创意分享应用，为手工爱好者提供作品展示平台。支持发布手工作品、分享制作过程、获得点赞鼓励等功能，让用户轻松展示创意才华。应用内置作品分类、制作教程、互动评论等功能，打造温馨的手工社区氛围。
应用以温暖的橙色为主色调，象征创意与热情。涵盖作品展示、发布作品、消息互动、个人中心四大模块。用户可以发布作品、浏览他人作品、点赞评论、关注创作者，构建手工爱好者社区。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 作品展示 | 浏览手工作品 | 卡片列表 |
| 发布作品 | 上传作品和教程 | 表单提交 |
| 点赞评论 | 互动交流 | 状态管理 |
| 分类浏览 | 按类型筛选作品 | 标签筛选 |
| 关注系统 | 关注喜欢的创作者 | 用户关系 |
| 制作教程 | 分享制作步骤 | 图文展示 |
1.3 作品分类定义
| 序号 | 分类名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 编织 | 🧶 | 毛衣、围巾、帽子等 |
| 2 | 陶艺 | 🏺 | 陶瓷器皿、雕塑等 |
| 3 | 木工 | 🪵 | 木制家具、工艺品等 |
| 4 | 纸艺 | 📄 | 折纸、剪纸、卡片等 |
| 5 | 珠宝 | 💎 | 首饰、饰品等 |
| 6 | 绘画 | 🎨 | 手绘、水彩、油画等 |
| 7 | 刺绣 | 🧵 | 十字绣、苏绣等 |
| 8 | 其他 | ✨ | 其他手工作品 |
1.4 作品状态定义
| 序号 | 状态名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 草稿 | 📝 | 未发布作品 |
| 2 | 已发布 | ✅ | 公开展示作品 |
| 3 | 已下架 | 📦 | 暂不展示作品 |
| 4 | 精选 | ⭐ | 平台推荐作品 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 数据存储 | 内存存储 | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_handcraft_showcase.dart
├── HandcraftShowcaseApp # 应用入口
├── HandcraftCategory # 作品分类枚举
├── WorkStatus # 作品状态枚举
├── HandcraftWork # 手工作品模型
├── MakingStep # 制作步骤模型
├── User # 用户模型
├── Comment # 评论模型
├── HandcraftShowcaseHomePage # 主页面（底部导航）
├── _buildHomePage # 首页
├── _buildPublishPage # 发布页
├── _buildMessagePage # 消息页
├── _buildProfilePage # 个人中心页
├── WorkCard # 作品卡片组件
├── CategoryChip # 分类芯片组件
└── CommentItem # 评论项组件二、系统架构
2.1 整体架构图
Data Layer
Business Layer
Presentation Layer
主页面
HandcraftShowcaseHomePage
首页
发布页
消息页
个人中心
作品瀑布流
分类筛选
搜索功能
作品上传
教程编辑
发布设置
点赞通知
评论消息
关注动态
我的作品
收藏夹
设置管理
作品管理器
WorkManager
用户管理器
UserManager
互动管理器
InteractionManager
HandcraftWork
手工作品
User
用户
Comment
评论
MakingStep
制作步骤
2.2 类图设计
has
has
contains
references
references
references
HandcraftShowcaseApp
+Widget build()
<<enumeration>>
HandcraftCategory
+String label
+String emoji
+knitting()
+pottery()
+woodwork()
+paperCraft()
+jewelry()
+painting()
+embroidery()
+other()
<<enumeration>>
WorkStatus
+String label
+String emoji
+draft()
+published()
+offline()
+featured()
HandcraftWork
+String id
+String title
+String description
+HandcraftCategory category
+List<String> images
+List<MakingStep> steps
+String authorId
+int likes
+int comments
+int favorites
+WorkStatus status
+DateTime createdAt
MakingStep
+int stepNumber
+String description
+String image
+String tip
User
+String id
+String username
+String avatar
+String bio
+int followers
+int following
+int works
Comment
+String id
+String workId
+String userId
+String content
+DateTime createdAt
2.3 页面导航流程
首页
发布
消息
我的
应用启动
首页
底部导航
浏览作品
发布作品
消息中心
个人中心
分类筛选
搜索作品
查看详情
点赞收藏
评论互动
关注作者
上传图片
编辑教程
发布作品
查看通知
回复评论
管理作品
编辑资料
2.4 作品发布流程
数据库 作品管理器 发布页 用户 数据库 作品管理器 发布页 用户 选择作品分类 显示分类表单 上传作品图片 图片预览 填写作品信息 表单验证 添加制作步骤 步骤编辑 点击发布 提交作品 保存作品 返回成功 发布成功 显示成功提示
三、核心模块设计
3.1 数据模型设计
3.1.1 作品分类枚举 (HandcraftCategory)
dart
enum HandcraftCategory {
knitting(label: '编织', emoji: '🧶'),
pottery(label: '陶艺', emoji: '🏺'),
woodwork(label: '木工', emoji: '🪵'),
paperCraft(label: '纸艺', emoji: '📄'),
jewelry(label: '珠宝', emoji: '💎'),
painting(label: '绘画', emoji: '🎨'),
embroidery(label: '刺绣', emoji: '🧵'),
other(label: '其他', emoji: '✨');
final String label;
final String emoji;
}3.1.2 手工作品模型 (HandcraftWork)
dart
class HandcraftWork {
final String id; // 作品ID
final String title; // 作品标题
final String description; // 作品描述
final HandcraftCategory category; // 作品分类
final List<String> images; // 作品图片
final List<MakingStep> steps; // 制作步骤
final String authorId; // 作者ID
final int likes; // 点赞数
final int comments; // 评论数
final int favorites; // 收藏数
final WorkStatus status; // 作品状态
final DateTime createdAt; // 创建时间
}3.1.3 制作步骤模型 (MakingStep)
dart
class MakingStep {
final int stepNumber; // 步骤编号
final String description; // 步骤描述
final String image; // 步骤图片
final String tip; // 小贴士
}3.1.4 用户模型 (User)
dart
class User {
final String id; // 用户ID
final String username; // 用户名
final String avatar; // 头像
final String bio; // 简介
final int followers; // 粉丝数
final int following; // 关注数
final int works; // 作品数
}3.1.5 作品分类分布
25% 20% 15% 15% 10% 8% 5% 2% 作品分类分布示例 编织 陶艺 木工 纸艺 绘画 珠宝 刺绣 其他
3.2 页面结构设计
3.2.1 主页面布局
HandcraftShowcaseHomePage
IndexedStack
首页
发布页
消息页
个人中心
NavigationBar
首页 Tab
发布 Tab
消息 Tab
我的 Tab
3.2.2 首页结构
首页
SliverAppBar
分类标签
作品瀑布流
搜索入口
全部
编织
陶艺
木工
作品卡片
作品图片
作品信息
互动按钮
3.2.3 发布页结构
发布页
作品信息
图片上传
制作步骤
发布设置
作品标题
作品描述
作品分类
选择图片
图片预览
删除图片
添加步骤
编辑步骤
删除步骤
可见设置
发布按钮
3.2.4 作品详情结构
作品详情
作品图片轮播
作品信息
制作教程
评论区
互动栏
作品标题
作者信息
作品描述
步骤列表
步骤详情
小贴士
评论列表
发表评论
点赞按钮
收藏按钮
分享按钮
3.3 作品发布逻辑
1-9张
过多或过少
是
否
是
否
开始发布
选择分类
上传图片
图片数量
填写信息
提示调整
添加步骤
需要教程?
编辑步骤
直接发布
预览作品
确认发布?
提交审核
保存草稿
发布成功
稍后发布
3.4 互动逻辑
点赞
评论
收藏
关注
用户互动
互动类型
更新点赞数
发送通知
发表评论
更新评论数
添加收藏
更新收藏数
关注作者
更新关注数
刷新界面
四、UI设计规范
4.1 配色方案
应用以温暖的橙色为主色调，象征创意与热情：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #FF9800 (Orange) | 导航、主题元素 |
| 辅助色 | #FFB74D | 按钮高亮 |
| 第三色 | #FFCC80 | 卡片背景 |
| 强调色 | #FFE0B2 | 标签背景 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 作品卡片 |
4.2 分类颜色
| 分类 | 色值 | 视觉效果 |
|---|---|---|
| 编织 | #E91E63 | 温暖粉红 |
| 陶艺 | #795548 | 质朴棕色 |
| 木工 | #8D6E63 | 自然木色 |
| 纸艺 | #2196F3 | 清新蓝色 |
| 珠宝 | #9C27B0 | 华贵紫色 |
| 绘画 | #4CAF50 | 生机绿色 |
| 刺绣 | #FF5722 | 活力橙红 |
| 其他 | #607D8B | 中性灰色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 作品标题 | 18px | Bold | #000000 |
| 作者名称 | 14px | Medium | #333333 |
| 作品描述 | 14px | Regular | #666666 |
| 互动数字 | 12px | Regular | #999999 |
4.4 组件规范
4.4.1 作品卡片
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ 作品图片 │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 🧶 精美手工围巾 │
│ │
│ 👤 小红 📅 2024-01-15 │
│ │
│ ❤️ 128 💬 32 ⭐ 56 │
└─────────────────────────────────────┘4.4.2 分类标签
┌─────────────────────────────────────┐
│ 作品分类 │
│ │
│ [🧶 编织] [🏺 陶艺] [🪵 木工] │
│ [📄 纸艺] [💎 珠宝] [🎨 绘画] │
│ [🧵 刺绣] [✨ 其他] │
└─────────────────────────────────────┘4.4.3 制作步骤
┌─────────────────────────────────────┐
│ 制作教程 │
│ │
│ 步骤 1 │
│ ┌─────────────────────────────┐ │
│ │ 步骤图片 │ │
│ └─────────────────────────────┘ │
│ 准备材料：毛线、棒针、剪刀 │
│ 💡 选择柔软的毛线效果更好 │
│ │
│ 步骤 2 │
│ ┌─────────────────────────────┐ │
│ │ 步骤图片 │ │
│ └─────────────────────────────┘ │
│ 起针：用棒针起40针 │
│ 💡 保持针脚均匀 │
└─────────────────────────────────────┘4.4.4 评论区
┌─────────────────────────────────────┐
│ 评论区 (32条) │
│ │
│ 👤 小明 │
│ 做得真漂亮！请问用的是什么材料？ │
│ 📅 2024-01-15 10:30 │
│ │
│ 👤 作者回复 │
│ 用的是羊毛线，很柔软哦~ │
│ 📅 2024-01-15 11:20 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 发表评论... [发送]│ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘4.4.5 发布表单
┌─────────────────────────────────────┐
│ 发布作品 │
│ │
│ 作品标题 │
│ ┌─────────────────────────────┐ │
│ │ 请输入作品标题 │ │
│ └─────────────────────────────┘ │
│ │
│ 作品分类 │
│ [🧶 编织] [🏺 陶艺] [🪵 木工] │
│ │
│ 作品图片 │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │ + │ │图1│ │图2│ │图3│ │
│ └───┘ └───┘ └───┘ └───┘ │
│ │
│ 作品描述 │
│ ┌─────────────────────────────┐ │
│ │ 请输入作品描述 │ │
│ └─────────────────────────────┘ │
│ │
│ [发布作品] │
└─────────────────────────────────────┘五、核心功能实现
5.1 作品发布实现
dart
class WorkPublisher {
static Future<HandcraftWork> publishWork({
required String title,
required String description,
required HandcraftCategory category,
required List<String> images,
required List<MakingStep> steps,
required String authorId,
}) async {
// 验证作品信息
if (title.isEmpty) {
throw Exception('作品标题不能为空');
}
if (images.isEmpty) {
throw Exception('请至少上传一张作品图片');
}
// 创建作品对象
final work = HandcraftWork(
id: 'work_${DateTime.now().millisecondsSinceEpoch}',
title: title,
description: description,
category: category,
images: images,
steps: steps,
authorId: authorId,
likes: 0,
comments: 0,
favorites: 0,
status: WorkStatus.published,
createdAt: DateTime.now(),
);
return work;
}
}5.2 点赞功能实现
dart
class LikeManager {
final Set<String> _likedWorks = {};
bool isLiked(String workId) {
return _likedWorks.contains(workId);
}
void toggleLike(String workId, HandcraftWork work) {
if (_likedWorks.contains(workId)) {
_likedWorks.remove(workId);
work.likes--;
} else {
_likedWorks.add(workId);
work.likes++;
}
}
int getTotalLikes() {
return _likedWorks.length;
}
}5.3 评论功能实现
dart
class CommentManager {
final Map<String, List<Comment>> _comments = {};
void addComment(String workId, Comment comment) {
if (!_comments.containsKey(workId)) {
_comments[workId] = [];
}
_comments[workId]!.add(comment);
}
List<Comment> getComments(String workId) {
return _comments[workId] ?? [];
}
void deleteComment(String workId, String commentId) {
_comments[workId]?.removeWhere((c) => c.id == commentId);
}
int getCommentCount(String workId) {
return _comments[workId]?.length ?? 0;
}
}5.4 收藏功能实现
dart
class FavoriteManager {
final Set<String> _favoriteWorks = {};
bool isFavorite(String workId) {
return _favoriteWorks.contains(workId);
}
void toggleFavorite(String workId, HandcraftWork work) {
if (_favoriteWorks.contains(workId)) {
_favoriteWorks.remove(workId);
work.favorites--;
} else {
_favoriteWorks.add(workId);
work.favorites++;
}
}
List<String> getFavorites() {
return _favoriteWorks.toList();
}
}5.5 关注功能实现
dart
class FollowManager {
final Set<String> _followingUsers = {};
bool isFollowing(String userId) {
return _followingUsers.contains(userId);
}
void toggleFollow(String userId, User user) {
if (_followingUsers.contains(userId)) {
_followingUsers.remove(userId);
user.followers--;
} else {
_followingUsers.add(userId);
user.followers++;
}
}
List<String> getFollowing() {
return _followingUsers.toList();
}
}六、交互设计
6.1 作品浏览流程
互动管理 作品详情 首页 用户 互动管理 作品详情 首页 用户 选择分类 筛选作品 显示作品列表 点击作品 加载详情 显示作品信息 点击点赞 更新点赞 返回结果 更新界面
6.2 作品发布流程
是
否
是
否
点击发布
选择分类
上传图片
填写信息
添加教程?
编辑步骤
预览作品
确认发布?
提交发布
发布成功
保存草稿
稍后发布
6.3 消息互动流程
点击点赞
点击评论
点击关注
点击消息
点击回复
点击用户
返回
返回
返回
消息列表
点赞通知
评论通知
关注通知
查看作品
回复评论
查看主页
七、扩展功能规划
7.1 后续版本规划
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 基础UI框架 作品展示功能 发布作品功能 评论互动功能 关注系统 消息通知 视频教程 社区活动 云端存储 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 手工作品展示应用开发计划
7.2 功能扩展建议
7.2.1 视频教程功能
视频功能：
- 上传制作视频
- 视频剪辑工具
- 添加字幕说明
- 视频播放优化
7.2.2 社区活动功能
活动功能：
- 主题创作比赛
- 投票评选系统
- 奖励机制
- 活动排行榜
7.2.3 电商功能
电商功能：
- 作品售卖
- 材料推荐
- 在线支付
- 订单管理
八、注意事项
8.1 开发注意事项
-
图片处理：需优化图片加载和缓存
-
性能优化：大量作品需实现分页加载
-
用户体验：发布流程需简洁流畅
-
数据安全：用户作品需妥善保存
-
社区氛围：评论需审核过滤
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 运行命令
bash
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_handcraft_showcase.dart --web-port 8142
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_handcraft_showcase.dart
# 代码分析
flutter analyze lib/main_handcraft_showcase.dart十、总结
手工作品展示应用是一款创意分享平台，通过作品展示、发布作品、消息互动、个人中心四大模块，为手工爱好者提供作品展示和交流平台。应用支持8种作品分类、完整的发布流程、点赞评论收藏等互动功能，打造温馨的手工社区氛围。
核心功能涵盖作品浏览、作品发布、互动交流、个人管理四大模块。作品浏览支持分类筛选和搜索；作品发布支持图片上传和教程编辑；互动交流支持点赞、评论、收藏、关注；个人管理支持作品管理和资料编辑。
应用采用 Material Design 3 设计规范，以温暖的橙色为主色调，象征创意与热情。通过本应用，希望能够帮助手工爱好者展示创意才华，分享制作经验，获得点赞鼓励，构建温馨的手工社区。
手工作品展示------展示创意，分享快乐