Flutter for OpenHarmony 编程技能树APP技术文章
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:flutterflutter_treeview:^1.0.0+1flutter_step_progress:^1.0.0flutter_confetti:^0.7.0shared_preferences:^2.2.2OpenHarmony 权限配置
在entry/src/main/module\.json5中添加：
"requestPermissions":[{"name":"ohos.permission.STORAGE_MANAGER","reason":"保存学习进度数据"}]🧩 分模块详解（附代码示例）
1. 📋 数据模型设计
首先我们需要定义技能节点的数据结构，这是整个 APP 的基础～
classSkillNode{finalStringid;finalStringname;finalStringdescription;bool isUnlocked;List<SkillNode>children;SkillNode({requiredthis.id,requiredthis.name,requiredthis.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. 📈 学习进度追踪
实时计算并展示用户的整体学习完成度～
doublecalculateProgress(List<SkillNode>nodes){int total=nodes.length;int unlocked=nodes.where((n)=>n.isUnlocked).length;returntotal>0?unlocked/total:0.0;}Text("学习进度:${(progress*100).toStringAsFixed(1)}%");4. 🏆 成就系统逻辑
判断用户是否达成特定成就，准备解锁惊喜！
voidcheckAchievements(){if(unlockedCount>=5&&!hasFirstAchievement){unlockAchievement("入门达人");showConfettiAnimation();}if(progress>=0.5)unlockAchievement("半程勇士");}5. 💾 本地数据持久化
用 shared_preferences 把学习进度存起来，再也不怕丢进度啦～
Future<void>saveProgress()async{finalprefs=awaitSharedPreferences.getInstance();awaitprefs.setStringList('unlocked_skills',unlockedSkills.map((s)=>s.id).toList());awaitprefs.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 # 主入口✨ 核心亮点回顾
🌳 可视化技能树- 游戏化学习体验，解锁技能超有成就感
🛤️ 科学学习路径- 4 阶段进阶，循序渐进不迷茫
🏆 成就激励系统- 彩带 + 徽章，学习就像打游戏
💾 进度持久化- 随时随地继续学习，数据不丢失
🎮 运行效果
在 OpenHarmony 设备上运行后，你将获得：
✅ 流畅的技能树交互体验，点击展开 / 收起丝滑
✅ 实时更新的学习进度，努力看得见
✅ 解锁成就时的炫酷彩带动画，仪式感满满
✅ 重启 APP 后数据完美恢复，学习永不中断
💡 小贴士：这个架构还可以轻松扩展！可以加入学习时长统计、每日打卡、好友排行榜等等功能～赶紧动手试试吧！