当前位置：首页 > news >正文

Flutter for OpenHarmony 思维导图学习工具技术文章

news 2026/5/11 2:00:55

Flutter for OpenHarmony 思维导图学习工具技术文章

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

🚀 Flutter for OpenHarmony 思维导图学习工具 - 知识梳理神器

哈喽各位鸿蒙开发者！今天带大家做一个超实用的思维导图学习工具🎯，专门用来帮你梳理知识、做学习总结、可视化笔记！再也不用对着密密麻麻的文字头疼啦～

📖 项目概述

有没有过这种经历？看书看了半天，合上书啥也记不住？知识点太散，想整理又不知道从何下手？

这款思维导图工具就是来解决这个问题的！✨ 你可以：

📚 梳理课程知识点，建立知识体系
📝 做读书笔记，把厚书读薄
🧠 考前复习，快速回顾重点
💡 头脑风暴，捕捉灵感火花

最棒的是，它完全基于 Flutter for OpenHarmony 开发，完美适配鸿蒙系统的各种特性！

🎯 核心功能

功能模块	能力描述	实现亮点
🌳 智能树形布局	自动计算节点位置，完美展示层级关系	graphview 自动布局算法
🎨 节点颜色自定义	每个节点可以选不同颜色，区分重要程度	flutter_colorpicker 调色板
📸 导图导出保存	一键导出为高清图片，保存到相册	screenshot_ohos 鸿蒙适配
📤 系统分享接收	从其他 APP 分享文本，快速创建节点	receive_sharing_intent

💡 库选择理由

1. graphview - 树形布局专家 🌳

为什么选它？

✅ 专门为 Flutter 优化的树形布局算法，自动计算节点间距
✅ 支持多种布局方向（上下、左右、放射状）
✅ OpenHarmony 平台完美适配，没有性能问题
✅ 支持手势缩放和平移，大图也能轻松查看

2. flutter_colorpicker - 调色板神器 🎨

为什么选它？

✅ 多种颜色选择模式：HSV、RGB、色块选择
✅ 支持透明度调节
✅ 鸿蒙系统风格的弹窗设计
✅ 体积小，集成超简单

3. screenshot_ohos - 鸿蒙专属截图 📸

为什么选它？

✅ 专门针对 OpenHarmony 适配的版本
✅ 支持截取整个 Widget 树，包括滚动内容
✅ 可以直接保存到系统相册
✅ 比通用截图库兼容性更好

4. receive_sharing_intent - 分享接收器 📤

为什么选它？

✅ 支持接收系统分享的文本、图片等
✅ 鸿蒙系统分享协议完美兼容
✅ 冷启动和热启动都能正常接收
✅ 一行代码就能集成

📦 环境配置

首先在pubspec\.yaml里添加依赖：

dependencies:flutter:sdk:fluttergraphview:^1.2.0flutter_colorpicker:^1.0.3screenshot_ohos:^0.0.2receive_sharing_intent:^1.4.5

然后在鸿蒙的config\.json里添加权限：

"module":{"reqPermissions":[{"name":"ohos.permission.WRITE_USER_STORAGE","reason":"保存导图图片到相册"},{"name":"ohos.permission.READ_USER_STORAGE","reason":"读取分享内容"}]}

🧩 分模块详解

1. 数据模型设计 📊

首先我们需要一个节点数据模型，用来存储每个节点的信息：

classMindMapNode{finalStringid;Stringtext;Colorcolor;List<MindMapNode>children;MindMapNode({requiredthis.id,requiredthis.text,this.color=Colors.blue,this.children=const[],});}

是不是很简单？每个节点有 id、文本、颜色，还有子节点列表。这样就构成了完整的树形结构～

2. 智能树形布局 🌳

这是最核心的部分！用 graphview 实现自动布局，再也不用手动算位置了：

finalGraphgraph=Graph();finalalgorithm=BuchheimWalkerAlgorithm(BuchheimWalkerConfiguration()..siblingSeparation=50..levelSeparation=80..subtreeSeparation=60..orientation=BuchheimWalkerConfiguration.ORIENTATION_LEFT_RIGHT);Widgetbuild(BuildContextcontext){returnInteractiveViewer(constrained:false,boundaryMargin:EdgeInsets.all(100),minScale:0.5,maxScale:2.0,child:GraphView(graph:graph,algorithm:algorithm),);}

看到没？就这么几行代码，自动布局就搞定了！还支持手势缩放平移，太香了～

3. 节点颜色选择 🎨

接下来是颜色选择功能，让每个节点都有自己的个性：

voidshowColorPicker(MindMapNodenode){showDialog(context:context,builder:(ctx)=>AlertDialog(title:Text('选择节点颜色'),content:BlockPicker(pickerColor:node.color,onColorChanged:(color)=>node.color=color,),actions:[TextButton(onPressed:()=>Navigator.pop(ctx),child:Text('确定'))],),);}

BlockPicker 就是最直观的色块选择，用户一看就懂！选完颜色节点立刻就变，实时预览～

4. 节点 Widget 渲染 🎯

每个节点怎么显示？用一个简单的 Container 就搞定：

WidgetbuildNode(MindMapNodenode){returnGestureDetector(onTap:()=>showColorPicker(node),child:Container(padding:EdgeInsets.symmetric(horizontal:16,vertical:8),decoration:BoxDecoration(color:node.color,borderRadius:BorderRadius.circular(20),boxShadow:[BoxShadow(color:Colors.black12,blurRadius:8)],),child:Text(node.text,style:TextStyle(color:Colors.white,fontSize:16)),),);}

圆角矩形 + 阴影，鸿蒙设计风格拉满！点击还能弹出颜色选择器，交互超流畅～

5. 添加和删除节点 ➕➖

动态操作节点也很简单，数据变了 UI 自动更新：

voidaddChildNode(MindMapNodeparent){finalnewNode=MindMapNode(id:DateTime.now().millisecondsSinceEpoch.toString(),text:'新节点',color:Colors.primaries[Random().nextInt(Colors.primaries.length)],);setState(()=>parent.children.add(newNode));}voiddeleteNode(MindMapNodenode){setState(()=>rootNode.children.removeWhere((n)=>n.id==node.id));}

随机颜色这个小细节超赞！新建节点自动分配不同颜色，不用手动选～

6. 导图导出为图片 📸

做好的导图怎么分享？用 screenshot_ohos 一键导出：

finalscreenshotController=ScreenshotController();Future<void>exportMindMap()async{finalimage=awaitscreenshotController.capture();if(image!=null){awaitSaveImage.saveToGallery(image,name:'mindmap_${DateTime.now().millisecondsSinceEpoch}.png');ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('导图已保存到相册！🎉')));}}

就这么简单！截完图直接存相册，用户想发朋友圈发朋友圈，想发微信发微信～

7. 接收系统分享 📤

这是最酷的功能！从浏览器、笔记 APP 等分享文本，直接创建导图节点：

@overridevoidinitState(){super.initState();ReceiveSharingIntent.getTextStream().listen((Stringtext){addChildNode(rootNode,text:text);ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('已添加分享内容！✅')));});ReceiveSharingIntent.getInitialText().then((String?text){if(text!=null)addChildNode(rootNode,text:text);});}

看到没？不管 APP 是正在运行还是重新打开，都能收到分享！看到好文章，一键分享到导图，学习效率直接拉满🚀

🏆 完整实现总结

项目结构

lib/ ├── main.dart # 入口文件 ├── models/ │ └── mind_map_node.dart # 节点数据模型 ├── widgets/ │ ├── node_widget.dart # 节点渲染组件 │ └── toolbar_widget.dart # 工具栏组件 └── pages/ └── editor_page.dart # 主编辑页面