Flutter 框架跨平台鸿蒙开发 - 手工技能学习

李李李勃谦2026-04-11 13:20

手工技能学习应用

欢迎加入开源鸿蒙跨平台社区：

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 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

CraftLearningHomePage
技能页
教程页
作品页
个人页
技能分类
技能详情
等级显示
教程列表
教程详情
视频播放
作品列表
作品上传
作品展示
学习统计
技能认证
设置选项
教程管理器

TutorialManager
进度管理器

ProgressManager
作品管理器

WorkManager
Tutorial

教程
CraftWork

作品
LearningProgress

学习进度

2.2 类图设计

belongs to
has
has
belongs to
tracks
has
CraftLearningApp
+Widget build()
<<enumeration>>
CraftSkill
+String label
+String emoji
+String description
+int difficulty
+knitting()
+pottery()
+woodworking()
+embroidery()
+paperCutting()
+leatherCraft()
<<enumeration>>
SkillLevel
+String label
+String emoji
+int minTutorials
+beginner()
+elementary()
+intermediate()
+advanced()
+master()
<<enumeration>>
TutorialType
+String label
+String emoji
+video()
+graphic()
+practice()
+advanced()
Tutorial
+String id
+String title
+CraftSkill skill
+SkillLevel level
+TutorialType type
+String description
+List<String> steps
+int duration
+int viewCount
+bool isCompleted
CraftWork
+String id
+String title
+CraftSkill skill
+String imagePath
+WorkStatus status
+DateTime createdAt
+String description
LearningProgress
+String id
+CraftSkill skill
+int completedTutorials
+SkillLevel currentLevel
+DateTime lastLearnTime
+int totalMinutes

2.3 页面导航流程

技能
教程
作品
我的
应用启动
技能页
底部导航
选择技能
浏览教程
查看作品
个人中心
查看技能详情
开始学习
教程列表
选择教程
教程详情
观看学习
标记完成
上传作品
展示作品
查看统计
技能认证

2.4 学习流程

进度管理器 教程页 技能页 用户 进度管理器 教程页 技能页 用户 选择技能 显示技能详情 开始学习 打开教程列表 显示教程 选择教程 显示教程内容 完成学习 更新进度 显示进度更新

三、核心模块设计

3.1 数据模型设计

3.1.1 技能分类枚举
dart 复制代码 
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 学习等级枚举
dart 复制代码 
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 教程模型
dart 复制代码 
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 作品模型
dart 复制代码 
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 学习进度模型
dart 复制代码 
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 技能学习分布

35% 25% 20% 10% 6% 4% 技能学习分布示例 编织 陶艺 刺绣 木工 剪纸 皮艺

3.2 页面结构设计

3.2.1 主页面布局

CraftLearningHomePage
IndexedStack
技能页
教程页
作品页
个人页
NavigationBar
技能 Tab
教程 Tab
作品 Tab
我的 Tab

3.2.2 技能页结构

技能页
SliverAppBar
技能分类卡片
学习进度
推荐教程
技能图标
技能名称
难度等级
学习人数
总进度条
各技能进度
热门教程
最新教程

3.2.3 教程页结构

教程页
SliverAppBar
筛选器
教程列表
技能筛选
等级筛选
类型筛选
教程卡片
教程标题
技能标签
难度等级
时长信息
完成状态

3.2.4 作品页结构

作品页
SliverAppBar
作品统计
作品网格
上传按钮
总作品数
认证作品
进行中作品
作品卡片
作品图片
作品标题
状态标签

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 技能数据初始化

dart 复制代码 
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 学习进度计算

dart 复制代码 
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 教程完成处理

dart 复制代码 
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 作品上传实现

dart 复制代码 
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 筛选功能实现

dart 复制代码 
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 等级提升流程

完成15个教程
完成30个教程
完成50个教程
完成80个教程
入门
初级
中级
高级
精通

七、扩展功能规划

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 开发注意事项

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

bash 复制代码 
# 查看可用设备
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 设计规范，以温暖的橙色为主色调，象征创造力与匠心精神。通过本应用，希望能够帮助用户系统学习手工技能，传承传统工艺，培养匠心精神，掌握一门手艺。

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

相关推荐
arvin_xiaoting2 小时前
OpenClaw学习总结_IV_认证与安全_1：OAuth与认证详解
服务器·学习·安全
768dh2 小时前
NCP1654学习（二）
学习
世人万千丶2 小时前
开源鸿蒙跨平台Flutter开发：时间管理番茄钟应用
学习·flutter·华为·开源·harmonyos
海海不掉头发2 小时前
【大模型Prompt-Tuning方法进阶+提示词】-基础学习篇
人工智能·学习·prompt
提子拌饭1332 小时前
开源鸿蒙跨平台Flutter开发：AR太空探索应用
flutter·华为·架构·开源·harmonyos·鸿蒙
咬_咬2 小时前
go语言学习（数组与切片）
开发语言·学习·golang·数组·切片
Chef_Chen2 小时前
Agent学习--LLM--推理熵
人工智能·学习·机器学习
互联网散修2 小时前
零基础鸿蒙应用开发第三十一节：await简化异步编程与Promise进阶并发
harmonyos
ECT-OS-JiuHuaShan2 小时前
科学的本来意义，是基于规范的共识逻辑，而非共识方法
人工智能·科技·学习·算法·生活
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了07Oh My Codex 快速使用指南08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09MySQL表约束详解：8大核心约束实战指南10【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时