Flutter for OpenHarmony 代码片段收藏夹APP技术文章

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

🚀 Flutter for OpenHarmony 实战：打造开发者专属代码片段收藏夹 APP

哈喽各位开发者小伙伴们！今天我们来一起搞一个超级实用的开发效率工具 —— 代码片段收藏夹 APP！作为每天和代码打交道的程序员，谁还没几段珍藏的 "祖传代码" 呢？有了这个 APP，你的 Dart、Java、Python、JS 各种代码片段都能统一管理，还支持语法高亮、一键复制、分享导出，简直是开发者必备神器！✨

---

📖 项目概述

作为一名跨平台开发者，你是不是也经常遇到这些痛点：

• 😫 写过的好用代码片段散落在各个项目里，想用的时候找不到

• 📱 手机上看到好的代码想收藏，却没有合适的工具

• 🔍 想找某段代码的时候要翻好几个聊天记录

• 📋 复制代码还要手动切换应用，麻烦得很

今天我们就用 Flutter for OpenHarmony 来解决这些问题！打造一个专属于开发者的代码片段收藏夹 APP，支持：

• 🎨 多语言代码语法高亮显示

• 📋 一键复制到鸿蒙系统剪贴板

• 📤 一键分享到微信 / QQ 等社交平台

• 💾 导出代码为本地文件永久保存

• 🏷️ 按编程语言分类管理

---

🎯 核心功能

功能模块	能力描述	用到的技术
🔤 语法高亮引擎	支持 Dart/Java/Python/JS 等 10 + 语言，彩色代码展示	flutter_highlighter
📋 剪贴板集成	鸿蒙系统原生剪贴板适配，一键复制代码	clipboard
📤 分享系统	调用系统分享面板，支持微信 / QQ 等多渠道	share_plus
💾 文件存储	鸿蒙文件路径管理，导出代码为本地文件	path_provider_ohos

---

💡 库选择理由

1. flutter_highlighter 🌟

为什么选它？

• ✅ 专门为 Flutter 优化的语法高亮库，性能超棒

• ✅ 支持超过 100 种编程语言，覆盖绝大多数开发场景

• ✅ 内置多种主题配色，深色浅色模式都好看

• ✅ OpenHarmony 平台完美适配，没有兼容性问题

• ✅ 自定义程度高，可以自己调整颜色样式

2. clipboard 📋

为什么选它？

• ✅ 鸿蒙系统剪贴板原生适配，兼容性拉满

• ✅ API 超级简单，一行代码就能实现复制粘贴

• ✅ 支持纯文本和富文本，代码复制格式不乱

• ✅ 不需要额外权限，开箱即用

• ✅ 响应速度快，复制成功立即有反馈

3. share_plus 📤

为什么选它？

• ✅ OpenHarmony 官方推荐的分享插件

• ✅ 支持系统所有已安装的分享渠道

• ✅ 可以分享文本、文件、图片多种格式

• ✅ 不需要自己做渠道适配，省心省力

• ✅ 维护活跃，问题修复及时

4. path_provider_ohos 💾

为什么选它？

• ✅ 鸿蒙平台专属的文件路径插件

• ✅ 支持临时目录、文档目录、缓存目录等各种路径

• ✅ 完全符合鸿蒙的文件安全规范

• ✅ API 和 Flutter 官方保持一致，学习成本低

• ✅ 不需要申请复杂的存储权限

---

📦 环境配置

首先在你的pubspec\.yaml里添加这四个依赖：

dependencies:
  flutter:
    sdk: flutter
  # 代码语法高亮
  flutter_highlighter: ^0.1.0
  # 鸿蒙剪贴板
  clipboard: ^0.1.3
  # 系统分享
  share_plus: ^7.2.2
  # 鸿蒙文件路径
  path_provider_ohos: ^2.0.0
  # 状态管理
  provider: ^6.1.1

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

"module": {
  "reqPermissions": [
    {
      "name": "ohos.permission.WRITE_USER_STORAGE",
      "reason": "导出代码文件需要存储权限"
    },
    {
      "name": "ohos.permission.READ_USER_STORAGE",
      "reason": "读取导出的代码文件"
    }
  ]
}

搞定！接下来就可以开始写代码啦！🚀

---

🧩 分模块详解

1. 数据模型设计 📊

首先我们来定义代码片段的数据模型，这个很简单：

class CodeSnippet {
  final String id;
  final String title;
  final String code;
  final String language;
  final DateTime createdAt;
  final String? description;
  
  const CodeSnippet({
    required this.id,
    required this.title,
    required this.code,
    required this.language,
    required this.createdAt,
    this.description,
  });
}

然后用一个简单的 Provider 来管理状态：

class SnippetProvider extends ChangeNotifier {
  final List<CodeSnippet> _snippets = [];
  List<CodeSnippet> get snippets => _snippets;
  
  void addSnippet(CodeSnippet snippet) {
    _snippets.add(snippet);
    notifyListeners();
  }
}

💡 小贴士：这里我用了 ChangeNotifier 做简单的状态管理，项目小的话完全够用啦！

2. 代码列表首页 🏠

首页我们做一个分类展示的列表，效果就像这样：

核心代码很简单，用 ListView.builder 就搞定：

ListView.builder(
  itemCount: snippets.length,
  itemBuilder: (context, index) {
    final snippet = snippets[index];
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: ListTile(
        title: Text(snippet.title),
        subtitle: Text(snippet.language),
        leading: _getLanguageIcon(snippet.language),
        onTap: () => _openDetailPage(snippet),
      ),
    );
  },
)

分类标签的切换也很容易：

String _selectedLanguage = 'all';
final _languages = ['all', 'Dart', 'Java', 'Python', 'JavaScript'];

Widget _buildFilterChips() {
  return Wrap(
    spacing: 8,
    children: _languages.map((lang) {
      return FilterChip(
        label: Text(lang),
        selected: _selectedLanguage == lang,
        onSelected: (selected) {
          setState(() => _selectedLanguage = lang);
        },
      );
    }).toList(),
  );
}

3. 语法高亮展示 ✨

这是整个 APP 的核心功能！用 flutter_highlighter 实现超简单：

import 'package:flutter_highlighter/flutter_highlighter.dart';
import 'package:flutter_highlighter/themes/atom-one-dark.dart';

Widget _buildCodeHighlight(CodeSnippet snippet) {
  return HighlightView(
    snippet.code,
    language: snippet.language.toLowerCase(),
    theme: atomOneDarkTheme,
    padding: const EdgeInsets.all(16),
    textStyle: const TextStyle(
      fontFamily: 'Monaco',
      fontSize: 14,
    ),
  );
}

🎨 划重点：内置了好多主题，atom-one-dark、github、vs-code 等等，随便挑随便选！

想换主题？一行代码的事儿：

// 浅色主题
theme: atomOneLightTheme,
// GitHub风格
theme: githubTheme,
// VS Code风格  
theme: vs2015Theme,

4. 鸿蒙剪贴板复制 📋

看到好代码想复制？点一下就搞定！

import 'package:clipboard/clipboard.dart';

void _copyToClipboard(String code) async {
  await FlutterClipboard.copy(code);
  if (mounted) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('✅ 代码已复制到剪贴板！')),
    );
  }
}

想从剪贴板粘贴代码新建片段？也很简单：

void _pasteFromClipboard() async {
  final code = await FlutterClipboard.paste();
  if (code.isNotEmpty && mounted) {
    _codeController.text = code;
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('📋 已从剪贴板粘贴代码')),
    );
  }
}

🎯 鸿蒙系统的剪贴板适配得特别好，复制完在其他应用里直接就能粘贴，格式一点不乱！

5. 一键分享功能 📤

看到好代码想分享给小伙伴？share_plus 来帮你！

import 'package:share_plus/share_plus.dart';

void _shareCode(CodeSnippet snippet) async {
  final text = '''
【${snippet.title}】
━━━━━━━━━━━━━━
语言：${snippet.language}
━━━━━━━━━━━━━━
${snippet.code}
━━━━━━━━━━━━━━
来自：Flutter for OpenHarmony 代码收藏夹
''';
  
  await Share.share(text, subject: snippet.title);
}

💡 分享的时候我给代码加了个好看的边框，这样发出去逼格满满！

想分享成文件也可以，后面讲文件导出的时候再说～

6. 新增 / 编辑代码界面 ✏️

添加新代码的界面也很清爽：

Widget _buildCodeInput() {
  return TextField(
    controller: _codeController,
    maxLines: null,
    keyboardType: TextInputType.multiline,
    style: const TextStyle(
      fontFamily: 'Monaco',
      fontSize: 14,
    ),
    decoration: const InputDecoration(
      hintText: '// 在这里粘贴或输入你的代码...',
      border: OutlineInputBorder(),
    ),
  );
}

编程语言选择下拉框：

DropdownButton<String>(
  value: _selectedLang,
  items: const [
    DropdownMenuItem(value: 'dart', child: Text('🎯 Dart')),
    DropdownMenuItem(value: 'java', child: Text('☕ Java')),
    DropdownMenuItem(value: 'python', child: Text('🐍 Python')),
    DropdownMenuItem(value: 'javascript', child: Text('💛 JavaScript')),
  ],
  onChanged: (value) => setState(() => _selectedLang = value!),
)

7. 文件导出功能 💾

最后我们来实现把代码导出成文件的功能，用 path_provider_ohos：

import 'package:path_provider/path_provider.dart';
import 'dart:io';

void _exportToFile(CodeSnippet snippet) async {
  // 获取鸿蒙文档目录
  final dir = await getApplicationDocumentsDirectory();
  final ext = _getFileExtension(snippet.language);
  final file = File('${dir.path}/${snippet.title}.$ext');
  
  // 写入文件
  await file.writeAsString(snippet.code);
  
  if (mounted) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('💾 文件已保存：${file.path}')),
    );
  }
}

根据语言自动匹配文件后缀：

String _getFileExtension(String language) {
  switch (language.toLowerCase()) {
    case 'dart': return 'dart';
    case 'java': return 'java';
    case 'python': return 'py';
    case 'javascript': return 'js';
    default: return 'txt';
  }
}

---

🏆 完整实现总结

项目结构一览

lib/
├── main.dart                 # 入口文件
├── models/
│   └── code_snippet.dart     # 数据模型
├── providers/
│   └── snippet_provider.dart # 状态管理
├── pages/
│   ├── home_page.dart        # 首页列表
│   ├── detail_page.dart      # 代码详情
│   └── edit_page.dart        # 新增编辑
└── widgets/
    ├── code_highlight.dart   # 语法高亮组件
    └── snippet_card.dart     # 列表卡片组件

核心亮点 ✨

1. 🎨 专业级语法高亮 - 支持百种编程语言，主题丰富

2. 📋 鸿蒙原生剪贴板 - 复制粘贴秒级响应，格式无损

3. 📤 全渠道分享 - 微信、QQ、钉钉一键直达

4. 💾 安全文件存储 - 符合鸿蒙文件规范，数据不丢失

5. 🏷️ 智能分类管理 - 按语言筛选，查找更高效

6. 🎯 纯 Flutter 实现 - 一套代码，多端运行

运行效果 🎬

整个 APP 在 OpenHarmony 设备上运行非常流畅，语法高亮渲染速度很快，复制分享都是秒级响应，文件导出也完全符合鸿蒙的安全规范。作为开发者的随身工具箱，这个 APP 真的太实用了！

---

🎉 写在最后

今天我们一起完成了一个开发者专属的效率工具，是不是很有成就感？这四个库在 OpenHarmony 上的表现都非常棒，大家可以放心用在自己的项目里。

代码片段收藏夹这个项目还有很多可以扩展的地方：

• 🔄 云端同步功能

• 🏷️ 自定义标签系统

• 🔍 全文搜索

• 🌙 深色模式切换

• 📊 使用统计

感兴趣的小伙伴可以继续完善，欢迎到开源鸿蒙跨平台社区交流分享！记得收藏本文，开发的时候随时可以参考～

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