手工作品展示应用

---

欢迎加入开源鸿蒙跨平台社区：
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 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 作品发布流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 作品分类枚举 (HandcraftCategory)

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)

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)

class MakingStep {
  final int stepNumber;         // 步骤编号
  final String description;     // 步骤描述
  final String image;           // 步骤图片
  final String tip;             // 小贴士
}

3.1.4 用户模型 (User)

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 作品分类分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 发布页结构

3.2.4 作品详情结构

3.3 作品发布逻辑

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 作品发布实现

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 点赞功能实现

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 评论功能实现

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 收藏功能实现

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 关注功能实现

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 后续版本规划

7.2 功能扩展建议

7.2.1 视频教程功能

视频功能：

• 上传制作视频
• 视频剪辑工具
• 添加字幕说明
• 视频播放优化

7.2.2 社区活动功能

活动功能：

• 主题创作比赛
• 投票评选系统
• 奖励机制
• 活动排行榜

7.2.3 电商功能

电商功能：

• 作品售卖
• 材料推荐
• 在线支付
• 订单管理

---

八、注意事项

8.1 开发注意事项

1. 图片处理：需优化图片加载和缓存

2. 性能优化：大量作品需实现分页加载

3. 用户体验：发布流程需简洁流畅

4. 数据安全：用户作品需妥善保存

5. 社区氛围：评论需审核过滤

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 运行命令

# 查看可用设备
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 设计规范，以温暖的橙色为主色调，象征创意与热情。通过本应用，希望能够帮助手工爱好者展示创意才华，分享制作经验，获得点赞鼓励，构建温馨的手工社区。

手工作品展示——展示创意，分享快乐

---