手工技能学习应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

手工技能学习是一款手工艺术学习应用，帮助用户系统学习各种手工技能，从入门到精通，掌握一门手艺。应用涵盖编织、陶艺、木工、刺绣、剪纸、皮艺等多种手工技能，提供分级教程、视频教学、图文讲解、作品展示等功能。用户可以按步骤学习，记录学习进度，展示作品成果，获得技能认证。

应用以温暖的橙色为主色调，象征创造力与匠心精神。涵盖技能学习、教程中心、作品展示、个人中心四大模块。用户可以选择技能、观看教程、练习制作、上传作品，系统地掌握手工技能。

1.2 核心功能

功能模块	功能描述	实现方式
技能分类	6种手工技能分类	枚举定义
学习等级	5级技能等级体系	等级系统
教程中心	分级教程内容	教程列表
视频教学	视频教程播放	视频播放器
图文讲解	详细步骤说明	图文展示
学习进度	记录学习进度	进度追踪
作品展示	上传展示作品	图片上传
技能认证	技能等级认证	认证系统

1.3 技能分类定义

序号	技能名称	Emoji	描述	难度
1	编织	🧶	毛线编织、钩针编织	⭐⭐
2	陶艺	🏺	陶器制作、瓷器工艺	⭐⭐⭐
3	木工	🪵	木制品制作、雕刻	⭐⭐⭐⭐
4	刺绣	🧵	传统刺绣、现代刺绣	⭐⭐⭐
5	剪纸	✂️	传统剪纸艺术	⭐⭐
6	皮艺	👜	皮革制品制作	⭐⭐⭐⭐

1.4 学习等级定义

序号	等级名称	Emoji	描述	达成条件
1	入门	🌱	了解基础知识	完成5个教程
2	初级	📖	掌握基本技能	完成15个教程
3	中级	🎓	熟练运用技能	完成30个教程
4	高级	🏆	精通技能技巧	完成50个教程
5	精通	👑	大师级水平	完成80个教程

1.5 教程类型定义

序号	类型名称	Emoji	描述	时长
1	视频教程	📹	视频教学	5-30分钟
2	图文教程	📝	图文讲解	10-20页
3	实践教程	🔨	动手实践	1-3小时
4	进阶教程	🚀	高级技巧	2-4小时

1.6 作品状态定义

序号	状态名称	Emoji	描述
1	制作中	🔨	正在制作
2	已完成	✅	制作完成
3	已认证	🏆	通过认证

1.7 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
数据存储	SharedPreferences	>= 2.0.0
视频播放	video_player	>= 2.7.0
图片选择	image_picker	>= 1.0.0
目标平台	鸿蒙OS / Web	API 21+

1.8 项目结构

lib/
└── main_craft_learning.dart
    ├── CraftLearningApp                 # 应用入口
    ├── CraftSkill                       # 技能分类枚举
    ├── SkillLevel                       # 学习等级枚举
    ├── TutorialType                     # 教程类型枚举
    ├── WorkStatus                       # 作品状态枚举
    ├── Tutorial                         # 教程模型
    ├── CraftWork                        # 作品模型
    ├── LearningProgress                 # 学习进度模型
    ├── CraftLearningHomePage           # 主页面（底部导航）
    ├── _buildSkillsPage                 # 技能页面
    ├── _buildTutorialsPage              # 教程页面
    ├── _buildWorksPage                  # 作品页面
    ├── _buildProfilePage                # 个人页面
    └── TutorialDetailPage               # 教程详情页

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 学习流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 技能分类枚举

enum CraftSkill {
  knitting(label: '编织', emoji: '🧶', description: '毛线编织、钩针编织', difficulty: 2),
  pottery(label: '陶艺', emoji: '🏺', description: '陶器制作、瓷器工艺', difficulty: 3),
  woodworking(label: '木工', emoji: '🪵', description: '木制品制作、雕刻', difficulty: 4),
  embroidery(label: '刺绣', emoji: '🧵', description: '传统刺绣、现代刺绣', difficulty: 3),
  paperCutting(label: '剪纸', emoji: '✂️', description: '传统剪纸艺术', difficulty: 2),
  leatherCraft(label: '皮艺', emoji: '👜', description: '皮革制品制作', difficulty: 4);

  final String label;
  final String emoji;
  final String description;
  final int difficulty;
  const CraftSkill({
    required this.label,
    required this.emoji,
    required this.description,
    required this.difficulty,
  });
}

3.1.2 学习等级枚举

enum SkillLevel {
  beginner(label: '入门', emoji: '🌱', minTutorials: 5),
  elementary(label: '初级', emoji: '📖', minTutorials: 15),
  intermediate(label: '中级', emoji: '🎓', minTutorials: 30),
  advanced(label: '高级', emoji: '🏆', minTutorials: 50),
  master(label: '精通', emoji: '👑', minTutorials: 80);

  final String label;
  final String emoji;
  final int minTutorials;
  const SkillLevel({
    required this.label,
    required this.emoji,
    required this.minTutorials,
  });
}

3.1.3 教程模型

class Tutorial {
  final String id;              // 教程ID
  final String title;           // 标题
  final CraftSkill skill;       // 技能分类
  final SkillLevel level;       // 难度等级
  final TutorialType type;      // 教程类型
  final String description;     // 描述
  final List<String> steps;     // 步骤列表
  final int duration;           // 时长(分钟)
  final int viewCount;          // 浏览次数
  final bool isCompleted;       // 是否完成

  const Tutorial({
    required this.id,
    required this.title,
    required this.skill,
    required this.level,
    required this.type,
    required this.description,
    required this.steps,
    required this.duration,
    this.viewCount = 0,
    this.isCompleted = false,
  });
}

3.1.4 作品模型

class CraftWork {
  final String id;              // 作品ID
  final String title;           // 作品标题
  final CraftSkill skill;       // 技能分类
  final String imagePath;       // 图片路径
  final WorkStatus status;      // 作品状态
  final DateTime createdAt;     // 创建时间
  final String description;     // 作品描述

  const CraftWork({
    required this.id,
    required this.title,
    required this.skill,
    required this.imagePath,
    required this.status,
    required this.createdAt,
    required this.description,
  });
}

3.1.5 学习进度模型

class LearningProgress {
  final String id;              // 进度ID
  final CraftSkill skill;       // 技能分类
  final int completedTutorials; // 完成教程数
  final SkillLevel currentLevel;// 当前等级
  final DateTime lastLearnTime; // 最后学习时间
  final int totalMinutes;       // 总学习时长

  const LearningProgress({
    required this.id,
    required this.skill,
    required this.completedTutorials,
    required this.currentLevel,
    required this.lastLearnTime,
    required this.totalMinutes,
  });
}

3.1.6 技能学习分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 技能页结构

3.2.3 教程页结构

3.2.4 作品页结构

3.3 学习进度逻辑

3.4 作品上传逻辑

---

四、UI设计规范

4.1 配色方案

应用以温暖的橙色为主色调，象征创造力与匠心精神：

颜色类型	色值	用途
主色	#FF9800 (Orange)	导航、主题元素
辅助色	#FFA726	技能页面
第三色	#FFB74D	教程页面
强调色	#FFCC80	作品页面
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片
成功色	#4CAF50	完成状态
警告色	#FF9800	进行中状态

4.2 技能配色

技能	色值	视觉效果
编织	#E91E63	粉红色
陶艺	#795548	棕色
木工	#8D6E63	木色
刺绣	#9C27B0	紫色
剪纸	#F44336	红色
皮艺	#6D4C41	皮革色

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
技能名称	18px	Bold	#000000
教程标题	16px	Bold	#000000
步骤文字	14px	Regular	#333333
描述文字	12px	Regular	#666666
统计数字	20px	Bold	白色

4.4 组件规范

4.4.1 技能卡片

┌─────────────────────────────────────┐
│  🧶 编织                              │
│                                     │
│  毛线编织、钩针编织                    │
│  难度: ⭐⭐                           │
│                                     │
│  已学习: 15个教程                     │
│  ━━━━━━━━━━━●━━━━━━━━━  30%        │
│                                     │
│  [开始学习]                           │
└─────────────────────────────────────┘

4.4.2 教程卡片

┌─────────────────────────────────────┐
│  📹 基础编织入门                       │
│                                     │
│  🧶 编织 · 🌱 入门 · 15分钟            │
│                                     │
│  学习毛线编织的基本技巧...              │
│                                     │
│  浏览 1234次         ✅ 已完成        │
└─────────────────────────────────────┘

4.4.3 作品卡片

┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │         作品图片             │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  我的第一个编织作品                    │
│  🧶 编织 · ✅ 已完成                  │
│                                     │
│  2024-01-15                         │
└─────────────────────────────────────┘

4.4.4 学习进度卡片

┌─────────────────────────────────────┐
│  📊 学习进度                          │
│                                     │
│  总学习时长: 120小时                   │
│  完成教程: 45个                        │
│  当前等级: 🎓 中级                     │
│                                     │
│  距离下一级还需: 5个教程                │
│  ━━━━━━━━━━━●━━━━━━━━━  90%        │
└─────────────────────────────────────┘

4.4.5 教程详情页

┌─────────────────────────────────────┐
│  基础编织入门                          │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  🧶 编织 · 🌱 入门 · 📹 视频教程        │
│                                     │
│  📝 教程简介                          │
│  学习毛线编织的基本技巧，包括...        │
│                                     │
│  📋 学习步骤                          │
│  1. 准备材料                          │
│  2. 学习基本针法                       │
│  3. 练习简单图案                       │
│                                     │
│  [标记完成]                           │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 技能数据初始化

final List<Tutorial> _tutorials = [
  Tutorial(
    id: '1',
    title: '基础编织入门',
    skill: CraftSkill.knitting,
    level: SkillLevel.beginner,
    type: TutorialType.video,
    description: '学习毛线编织的基本技巧，包括起针、收针等基础操作。',
    steps: [
      '准备毛线和编织针',
      '学习起针方法',
      '练习基本针法',
      '完成简单作品',
    ],
    duration: 15,
    viewCount: 1234,
  ),
  // ... 更多教程
];

5.2 学习进度计算

class ProgressCalculator {
  static SkillLevel calculateLevel(int completedTutorials) {
    if (completedTutorials >= 80) return SkillLevel.master;
    if (completedTutorials >= 50) return SkillLevel.advanced;
    if (completedTutorials >= 30) return SkillLevel.intermediate;
    if (completedTutorials >= 15) return SkillLevel.elementary;
    return SkillLevel.beginner;
  }

  static double calculateProgress(int completed, int total) {
    if (total == 0) return 0;
    return (completed / total).clamp(0.0, 1.0);
  }
}

5.3 教程完成处理

void _completeTutorial(String tutorialId) {
  setState(() {
    final index = _tutorials.indexWhere((t) => t.id == tutorialId);
    if (index != -1) {
      _tutorials[index] = Tutorial(
        id: _tutorials[index].id,
        title: _tutorials[index].title,
        skill: _tutorials[index].skill,
        level: _tutorials[index].level,
        type: _tutorials[index].type,
        description: _tutorials[index].description,
        steps: _tutorials[index].steps,
        duration: _tutorials[index].duration,
        viewCount: _tutorials[index].viewCount,
        isCompleted: true,
      );

      _completedTutorials++;
      _currentLevel = ProgressCalculator.calculateLevel(_completedTutorials);

      if (_completedTutorials == 15 ||
          _completedTutorials == 30 ||
          _completedTutorials == 50 ||
          _completedTutorials == 80) {
        _showLevelUpDialog();
      }
    }
  });
}

5.4 作品上传实现

void _uploadWork(String title, CraftSkill skill, String description) {
  final work = CraftWork(
    id: 'work_${DateTime.now().millisecondsSinceEpoch}',
    title: title,
    skill: skill,
    imagePath: 'placeholder.jpg',
    status: WorkStatus.completed,
    createdAt: DateTime.now(),
    description: description,
  );

  setState(() {
    _works.insert(0, work);
  });
}

5.5 筛选功能实现

void _filterTutorials() {
  setState(() {
    _filteredTutorials = _tutorials.where((tutorial) {
      bool matchSkill = _selectedSkill == null || tutorial.skill == _selectedSkill;
      bool matchLevel = _selectedLevel == null || tutorial.level == _selectedLevel;
      bool matchType = _selectedType == null || tutorial.type == _selectedType;
      return matchSkill && matchLevel && matchType;
    }).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 常见问题

问题	原因	解决方案
视频加载慢	网络问题	提供多清晰度选择
图片上传失败	文件过大	自动压缩图片
进度丢失	未及时保存	增加自动保存
教程显示异常	数据格式错误	数据验证处理
筛选无结果	条件过严	提供默认选项

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_craft_learning.dart --web-port 8154

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_craft_learning.dart

# 代码分析
flutter analyze lib/main_craft_learning.dart

---

十、总结

手工技能学习应用通过技能学习、教程中心、作品展示、个人中心四大模块，为用户提供了一个系统的手工技能学习平台。应用涵盖编织、陶艺、木工、刺绣、剪纸、皮艺等多种手工技能，提供分级教程、视频教学、图文讲解、作品展示等功能。

核心功能涵盖技能分类、教程学习、进度追踪、作品展示四大模块。技能分类从编织到皮艺，覆盖多种传统和现代手工艺；教程学习支持视频、图文、实践等多种形式；进度追踪记录学习历程和等级提升；作品展示让用户分享创作成果。

应用采用 Material Design 3 设计规范，以温暖的橙色为主色调，象征创造力与匠心精神。通过本应用，希望能够帮助用户系统学习手工技能，传承传统工艺，培养匠心精神，掌握一门手艺。

手工技能学习——传承匠心，掌握技艺

---