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: flutter
  graphview: ^1.2.0
  flutter_colorpicker: ^1.0.3
  screenshot_ohos: ^0.0.2
  receive_sharing_intent: ^1.4.5

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

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

---

🧩 分模块详解

1. 数据模型设计 📊

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

class MindMapNode {
  final String id;
  String text;
  Color color;
  List<MindMapNode> children;
  
  MindMapNode({
    required this.id,
    required this.text,
    this.color = Colors.blue,
    this.children = const [],
  });
}

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

2. 智能树形布局 🌳

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

final Graph graph = Graph();
final algorithm = BuchheimWalkerAlgorithm(
  BuchheimWalkerConfiguration()
    ..siblingSeparation = 50
    ..levelSeparation = 80
    ..subtreeSeparation = 60
    ..orientation = BuchheimWalkerConfiguration.ORIENTATION_LEFT_RIGHT
);

Widget build(BuildContext context) {
  return InteractiveViewer(
    constrained: false,
    boundaryMargin: EdgeInsets.all(100),
    minScale: 0.5,
    maxScale: 2.0,
    child: GraphView(graph: graph, algorithm: algorithm),
  );
}

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

3. 节点颜色选择 🎨

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

void showColorPicker(MindMapNode node) {
  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 就搞定：

Widget buildNode(MindMapNode node) {
  return GestureDetector(
    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 自动更新：

void addChildNode(MindMapNode parent) {
  final newNode = MindMapNode(
    id: DateTime.now().millisecondsSinceEpoch.toString(),
    text: '新节点',
    color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
  );
  setState(() => parent.children.add(newNode));
}

void deleteNode(MindMapNode node) {
  setState(() => rootNode.children.removeWhere((n) => n.id == node.id));
}

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

6. 导图导出为图片 📸

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

final screenshotController = ScreenshotController();

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

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

7. 接收系统分享 📤

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

@override
void initState() {
  super.initState();
  ReceiveSharingIntent.getTextStream().listen((String text) {
    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      # 主编辑页面

核心亮点

1. 自动布局算法 - 再也不用手动调位置，graphview 帮你搞定一切

2. 鸿蒙深度适配 - screenshot_ohos 专门针对鸿蒙优化，兼容性拉满

3. 系统级集成 - 接收系统分享，和其他 APP 无缝协作

4. 极致用户体验 - 颜色自定义、手势缩放，操作流畅到飞起

运行效果

打开 APP 就能看到一个简洁的编辑界面，点击 "+ 添加节点" 就能创建新的分支，点击节点可以改颜色，做好的导图一键导出分享。整个操作行云流水，完全没有卡顿感，这就是 Flutter for OpenHarmony 的魅力！

---

💪 下一步可以做的优化

• 支持撤销 / 重做操作

• 导图数据本地持久化

• 支持导出为 PDF、XMind 格式

• 多人协作编辑功能

好了，今天的教程就到这里！快去动手试试吧，做一个属于自己的思维导图工具～有问题欢迎在评论区交流，我们下期再见！👋