Flutter真香，我用它写了个桌面版JSON解析工具

　　Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
　　话不多说，先来看看实际效果。项目源码地址
　　开发环境如下：
　　Flutter：2。8。1
　　Dart：2。15。1
　　IDE：VSCode
　　JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型：null，num，string，object，array，bool。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。voidfromJson（MapString，dynamic？json）｛if（jsonnull）return；agejson〔age〕；namejson〔name〕？？；｝复制代码
　　数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具jsonserializable可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。
　　本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。1、创建项目
　　要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持windows和macos系统。flutterconfigenablewindowsdesktopflutterconfigenablemacosdesktop复制代码
　　接下来使用fluttercreate命令创建我们的模版工程。fluttercreatetappplatformsmacos，windowshellodesktop复制代码
　　创建完项目后，我们就可以run起来了。2、功能介绍
　　先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。
　　这里自动修正的功能能帮助我们将异常的格式不正确的json转为正确的格式，不过处于开发阶段，可以不必理会。3、关键技术点难点记录：1、控制窗口Window
　　我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件bitsdojowindow。通过bitsdojowindow，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。2、鼠标移动捕捉
　　通过InkWell组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置tipInkWell（child：tip，hoverColor：Colors。white，highlightColor：Colors。white，splashColor：Colors。white，onHover：（value）｛boolneedChangeStatewidget。showTip！value；if（needChangeState）｛if（value）｛鼠标在tip上，显示提示showTip（context，PointerHoverEvent（））；｝else｛overlay？。remove（）；｝｝widget。showTipvalue；｝，onTap：（）｛｝，）；复制代码3、鼠标停在指定文字上时显示提示框，移开鼠标时隐藏提示框
　　这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用Overlay。需要注意的是，由于在Overlay上的text的根结点不是Material风格的组件，因此会出现黄色的下划线。因此一定要用Material包一下text。并且你必须给创建的OverlayEntry一个位置，否则它将全屏显示。WidgetentryconstText（自动修复指输入的JSON格式不正确时，工具将根据正确的JSON格式自动为其补其确实内容。如、｛｝、：等，style：TextStyle（fontSize：14，color：Colors。black），）；entryMaterial（child：entry，）；。。。其他代码OverlayEntryoverlayOverlayEntry（builder：（）｛returnentry；｝，）；Overlay。of（context）？。insert（overlay）；this。overlayoverlay；｝复制代码4、读取鼠标拖拽的文件
　　读取说表拖拽的文件一开始想尝试使用InkWell组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter2天写个桌面端APP》中发现一个可读取拖拽文件的组件desktopdrop，能满足要求。5、本地文件选取
　　使用开源组件filepicker，选完图片后的操作和拖拽选择图片后的操作一致。6、TextField显示富文本
　　Textfield如果要显示富文本，那么需要自定义TextEditingController。并重写buildTextSpan方法。classRichTextEditingControllerextendsTextEditingController｛。。。overrideTextSpanbuildTextSpan（｛requiredBuildContextcontext，TextStyle？style，requiredboolwithComposing｝）｛if（highlight）｛TextSpantext；String？inputOutputManager（）。inputJSON；textserializer。formatRich（input）？？constTextSpan（）；returntext；｝Stringjsonvalue。text；returnTextSpan（text：json，style：style）；｝｝复制代码7、导出文件报错
　　在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。flutter：pathUserszlLibraryContainerscom。example。jsonFormatDataDownloads〔ERROR：flutterlibuiuidartstate。cc（209）〕UnhandledException：FileSystemException：Cannotopenfile，pathUserszlLibraryContainerscom。example。jsonFormatDataDownloadsmyformatjson。json（OSError：Operationnotpermitted，errno1）复制代码
　　通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为com。apple。security。files。downloads。readwrite，表示对用户的下载文件夹的读写访问权限。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的DebugProfile。entitlements文件，向entitlements文件中添加com。apple。security。files。downloads。readwrite，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
　　当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将entitlements文件的AppSandbox设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
　　原文地址：https：juejin。cnpost7069689952459554830