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

Flutter for OpenHarmony 代码片段收藏夹APP技术文章欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net Flutter for OpenHarmony 实战打造开发者专属代码片段收藏夹 APP哈喽各位开发者小伙伴们今天我们来一起搞一个超级实用的开发效率工具 —— 代码片段收藏夹 APP作为每天和代码打交道的程序员谁还没几段珍藏的 #34;祖传代码#34; 呢有了这个 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. 数据模型设计 首先我们来定义代码片段的数据模型这个很简单classCodeSnippet{finalStringid;finalStringtitle;finalStringcode;finalStringlanguage;finalDateTimecreatedAt;finalString?description;constCodeSnippet({requiredthis.id,requiredthis.title,requiredthis.code,requiredthis.language,requiredthis.createdAt,this.description,});}然后用一个简单的 Provider 来管理状态classSnippetProviderextendsChangeNotifier{finalListCodeSnippet_snippets[];ListCodeSnippetgetsnippets_snippets;voidaddSnippet(CodeSnippetsnippet){_snippets.add(snippet);notifyListeners();}} 小贴士这里我用了 ChangeNotifier 做简单的状态管理项目小的话完全够用啦2. 代码列表首页 首页我们做一个分类展示的列表效果就像这样核心代码很简单用 ListView.builder 就搞定ListView.builder(itemCount:snippets.length,itemBuilder:(context,index){finalsnippetsnippets[index];returnCard(margin:constEdgeInsets.symmetric(horizontal:16,vertical:8),child:ListTile(title:Text(snippet.title),subtitle:Text(snippet.language),leading:_getLanguageIcon(snippet.language),onTap:()_openDetailPage(snippet),),);},)分类标签的切换也很容易String_selectedLanguageall;final_languages[all,Dart,Java,Python,JavaScript];Widget_buildFilterChips(){returnWrap(spacing:8,children:_languages.map((lang){returnFilterChip(label:Text(lang),selected:_selectedLanguagelang,onSelected:(selected){setState(()_selectedLanguagelang);},);}).toList(),);}3. 语法高亮展示 ✨这是整个 APP 的核心功能用 flutter_highlighter 实现超简单importpackage:flutter_highlighter/flutter_highlighter.dart;importpackage:flutter_highlighter/themes/atom-one-dark.dart;Widget_buildCodeHighlight(CodeSnippetsnippet){returnHighlightView(snippet.code,language:snippet.language.toLowerCase(),theme:atomOneDarkTheme,padding:constEdgeInsets.all(16),textStyle:constTextStyle(fontFamily:Monaco,fontSize:14,),);} 划重点内置了好多主题atom-one-dark、github、vs-code 等等随便挑随便选想换主题一行代码的事儿// 浅色主题theme:atomOneLightTheme,// GitHub风格theme:githubTheme,// VS Code风格theme:vs2015Theme,4. 鸿蒙剪贴板复制 看到好代码想复制点一下就搞定importpackage:clipboard/clipboard.dart;void_copyToClipboard(Stringcode)async{awaitFlutterClipboard.copy(code);if(mounted){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text(✅ 代码已复制到剪贴板)),);}}想从剪贴板粘贴代码新建片段也很简单void_pasteFromClipboard()async{finalcodeawaitFlutterClipboard.paste();if(code.isNotEmptymounted){_codeController.textcode;ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text( 已从剪贴板粘贴代码)),);}} 鸿蒙系统的剪贴板适配得特别好复制完在其他应用里直接就能粘贴格式一点不乱5. 一键分享功能 看到好代码想分享给小伙伴share_plus 来帮你importpackage:share_plus/share_plus.dart;void_shareCode(CodeSnippetsnippet)async{finaltext 【${snippet.title}】 ━━━━━━━━━━━━━━ 语言${snippet.language}━━━━━━━━━━━━━━${snippet.code}━━━━━━━━━━━━━━ 来自Flutter for OpenHarmony 代码收藏夹 ;awaitShare.share(text,subject:snippet.title);} 分享的时候我给代码加了个好看的边框这样发出去逼格满满想分享成文件也可以后面讲文件导出的时候再说6. 新增 / 编辑代码界面 ✏️添加新代码的界面也很清爽Widget_buildCodeInput(){returnTextField(controller:_codeController,maxLines:null,keyboardType:TextInputType.multiline,style:constTextStyle(fontFamily:Monaco,fontSize:14,),decoration:constInputDecoration(hintText:// 在这里粘贴或输入你的代码...,border:OutlineInputBorder(),),);}编程语言选择下拉框DropdownButtonString(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(()_selectedLangvalue!),)7. 文件导出功能 最后我们来实现把代码导出成文件的功能用 path_provider_ohosimportpackage:path_provider/path_provider.dart;importdart:io;void_exportToFile(CodeSnippetsnippet)async{// 获取鸿蒙文档目录finaldirawaitgetApplicationDocumentsDirectory();finalext_getFileExtension(snippet.language);finalfileFile(${dir.path}/${snippet.title}.$ext);// 写入文件awaitfile.writeAsString(snippet.code);if(mounted){ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text( 文件已保存${file.path})),);}}根据语言自动匹配文件后缀String_getFileExtension(Stringlanguage){switch(language.toLowerCase()){casedart:returndart;casejava:returnjava;casepython:returnpy;casejavascript:returnjs;default:returntxt;}} 完整实现总结项目结构一览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 # 列表卡片组件核心亮点 ✨ 专业级语法高亮- 支持百种编程语言主题丰富 鸿蒙原生剪贴板- 复制粘贴秒级响应格式无损 全渠道分享- 微信、QQ、钉钉一键直达 安全文件存储- 符合鸿蒙文件规范数据不丢失️ 智能分类管理- 按语言筛选查找更高效 纯 Flutter 实现- 一套代码多端运行运行效果 整个 APP 在 OpenHarmony 设备上运行非常流畅语法高亮渲染速度很快复制分享都是秒级响应文件导出也完全符合鸿蒙的安全规范。作为开发者的随身工具箱这个 APP 真的太实用了 写在最后今天我们一起完成了一个开发者专属的效率工具是不是很有成就感这四个库在 OpenHarmony 上的表现都非常棒大家可以放心用在自己的项目里。代码片段收藏夹这个项目还有很多可以扩展的地方 云端同步功能️ 自定义标签系统 全文搜索 深色模式切换 使用统计感兴趣的小伙伴可以继续完善欢迎到开源鸿蒙跨平台社区交流分享记得收藏本文开发的时候随时可以参考欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net