Flutter for OpenHarmony 编程技能树APP技术文章

开源鸿蒙跨平台社区：https://gitee.com/openharmony-sig/flutter_flutter

哈喽各位鸿蒙开发者小伙伴们！👋 今天带大家搞一个超实用的编程学习辅助 APP —— 技能树与学习路径规划系统！再也不用面对茫茫知识海洋不知道从何学起啦～🎯

---

📖 项目概述

😫 编程学习的那些痛点

是不是经常有这种感觉：

• 想学 Flutter/OpenHarmony，但是知识点太散，东学一点西学一点 🤯

• 学了很久不知道自己到底掌握了多少，进度全靠感觉 📊

• 没有成就感，学着学着就放弃了 😢

• 不知道下一步该学什么，陷入迷茫 🤷‍♂️

✨ 我们的 APP 能做什么！

这款技能树学习 APP就是来解决这些问题的！它可以：

• 🌳 可视化技能树：所有知识点一目了然，像游戏一样解锁技能

• 🛤️ 分阶段学习路径：科学规划，一步一个脚印稳步提升

• 🏆 成就解锁系统：学习就像打游戏，解锁徽章超有成就感

• 📈 学习进度追踪：实时掌握学习情况，数据驱动成长

---

🎯 核心功能一览

功能模块	能力描述	实现亮点
🌳 可视化技能树	树形结构展示所有编程技能节点，支持展开 / 收起	交互式节点点击，已解锁 / 未解锁状态区分
🛤️ 分阶段学习路径	将学习内容划分为入门→进阶→实战→精通 4 个阶段	步骤进度条实时展示，当前阶段高亮显示
🏆 成就解锁系统	完成学习目标自动解锁对应成就徽章	炫酷彩带庆祝动画，满满的仪式感
📈 学习进度追踪	本地持久化存储学习数据，随时查看进度	支持断点续学，重启 APP 进度不丢失

---

💡 第三方库选择理由（OpenHarmony 适配版）

1. 🌳 flutter_treeview

为什么选它？

• ✅ OpenHarmony 完美适配，无兼容性问题

• ✅ 支持无限层级的树形结构，技能节点想加多少加多少

• ✅ 自定义节点样式，想怎么美化就怎么美化

• ✅ 展开 / 收起动画丝滑流畅，体验拉满

• ✅ 支持节点选中、勾选等多种交互模式

2. 📊 flutter_step_progress

为什么选它？

• ✅ 专门为步骤进度设计的组件，开箱即用

• ✅ OpenHarmony 端渲染性能优秀，不掉帧

• ✅ 支持横向 / 纵向多种布局模式

• ✅ 完成 / 进行中 / 未完成三种状态自动切换

• ✅ 自定义颜色、图标，完美匹配鸿蒙设计语言

3. 🎉 flutter_confetti

为什么选它？

• ✅ 超炫酷的彩带动画，成就解锁必备神器

• ✅ OpenHarmony 硬件加速渲染，性能杠杠的

• ✅ 支持多种彩带形状、颜色、发射角度

• ✅ 性能开销极小，不影响 APP 流畅度

• ✅ 动画时长、强度可自由控制

4. 💾 shared_preferences

为什么选它？

• ✅ Flutter 官方推荐，OpenHarmony 深度适配

• ✅ 轻量级键值对存储，学习进度保存首选

• ✅ 异步 API，不阻塞 UI 线程

• ✅ 数据持久化，APP 重启不丢失

• ✅ 支持多种数据类型，int/string/bool 全搞定

---

📦 环境配置

pubspec.yaml 依赖配置

dependencies:
  flutter:
    sdk: flutter
  flutter_treeview: ^1.0.0+1
  flutter_step_progress: ^1.0.0
  flutter_confetti: ^0.7.0
  shared_preferences: ^2.2.2

OpenHarmony 权限配置

在 entry/src/main/module\.json5 中添加：

"requestPermissions": [
  {
    "name": "ohos.permission.STORAGE_MANAGER",
    "reason": "保存学习进度数据"
  }
]

---

🧩 分模块详解（附代码示例）

1. 📋 数据模型设计

首先我们需要定义技能节点的数据结构，这是整个 APP 的基础～

class SkillNode {
  final String id;
  final String name;
  final String description;
  bool isUnlocked;
  List<SkillNode> children;
  
  SkillNode({required this.id, required this.name, 
    required this.description, this.isUnlocked = false, 
    this.children = const []});
}

2. 🌳 技能树渲染实现

用 flutter_treeview 实现炫酷的树形技能展示！

TreeView(
  nodes: skillNodes,
  builder: (context, node) => ListTile(
    title: Text(node.data.name),
    leading: Icon(node.data.isUnlocked 
      ? Icons.check_circle : Icons.lock,
      color: node.data.isUnlocked ? Colors.green : Colors.grey),
    onTap: () => toggleSkill(node.data),
  ),
)

3. 📈 学习进度追踪

实时计算并展示用户的整体学习完成度～

double calculateProgress(List<SkillNode> nodes) {
  int total = nodes.length;
  int unlocked = nodes.where((n) => n.isUnlocked).length;
  return total > 0 ? unlocked / total : 0.0;
}

Text("学习进度: ${(progress * 100).toStringAsFixed(1)}%");

4. 🏆 成就系统逻辑

判断用户是否达成特定成就，准备解锁惊喜！

void checkAchievements() {
  if (unlockedCount >= 5 && !hasFirstAchievement) {
    unlockAchievement("入门达人");
    showConfettiAnimation();
  }
  if (progress >= 0.5) unlockAchievement("半程勇士");
}

5. 💾 本地数据持久化

用 shared_preferences 把学习进度存起来，再也不怕丢进度啦～

Future<void> saveProgress() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setStringList('unlocked_skills', 
    unlockedSkills.map((s) => s.id).toList());
  await prefs.setDouble('learning_progress', progress);
}

6. 🛤️ 学习路径步骤展示

分阶段展示学习路径，让学习目标更清晰！

StepProgress(
  totalSteps: 4,
  currentStep: currentStage,
  labels: ["入门", "进阶", "实战", "精通"],
  completedColor: Colors.blue,
  progressColor: Colors.lightBlue,
)

7. 🎊 解锁庆祝动画

成就解锁必须有仪式感！彩带撒起来～

ConfettiWidget(
  confettiController: _controller,
  blastDirection: pi / 2,
  maxBlastForce: 5,
  minBlastForce: 2,
  emissionFrequency: 0.05,
  numberOfParticles: 20,
)

---

🏆 完整实现总结

📁 项目结构

lib/
├── models/
│   └── skill_node.dart          # 技能节点数据模型
├── widgets/
│   ├── skill_tree_widget.dart   # 技能树组件
│   ├── progress_widget.dart     # 进度展示组件
│   └── achievement_widget.dart  # 成就组件
├── services/
│   └── storage_service.dart     # 本地存储服务
└── main.dart                    # 主入口

✨ 核心亮点回顾

1. 🌳 可视化技能树 - 游戏化学习体验，解锁技能超有成就感

2. 🛤️ 科学学习路径 - 4 阶段进阶，循序渐进不迷茫

3. 🏆 成就激励系统 - 彩带 + 徽章，学习就像打游戏

4. 💾 进度持久化 - 随时随地继续学习，数据不丢失

🎮 运行效果

在 OpenHarmony 设备上运行后，你将获得：

• ✅ 流畅的技能树交互体验，点击展开 / 收起丝滑

• ✅ 实时更新的学习进度，努力看得见

• ✅ 解锁成就时的炫酷彩带动画，仪式感满满

• ✅ 重启 APP 后数据完美恢复，学习永不中断

---

💡 小贴士：这个架构还可以轻松扩展！可以加入学习时长统计、每日打卡、好友排行榜等等功能～赶紧动手试试吧！