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

·  阅读 22485
Flutter真香,我用它写了个桌面版JSON解析工具

Flutter支持稳定的桌面设备开发已经一段时间了,不得不说,Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验,但仍然使用Flutter开发出了一个桌面版小程序,功能很简单,就是对输入的json做格式化处理和转模型。

话不多说,先来看看实际效果。项目源码地址

yanshi.gif

开发环境如下:

Flutter: 2.8.1

Dart: 2.15.1

IDE: VSCode

JSON作为我们日常开发工作中经常要打交道的一种数据格式,它共有6种数据类型:null, num, string, object, array, bool。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中,又需要接触到json解析时,就会感觉非常棘手,因为flutter没有反射,导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。

void fromJson(Map<String, dynamic>? json) {
	if (json == null) return;
	age = json['age'];
	name = json['name'] ?? '';
}
复制代码

数据量少还能接受,一旦量大,那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码,也解决了flutter界json转模型的空缺。当然,业界也有专门解析json的网站,可以自动生成dart代码,使用者在生成后复制进项目中即可,也是非常方便的。

本项目以json解析为切入点,和大家一起来看下flutter是如何开发桌面应用的。

1、创建项目

要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下,让我们的项目支持windowsmacos系统。

flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
复制代码

接下来使用flutter create命令创建我们的模版工程。

flutter create -t app --platforms macos,windows  hello_desktop
复制代码

创建完项目后,我们就可以run起来了。

2、功能介绍

先来看下整体界面,界面四块,分别为功能模块、文件选择模块、输入模块、输出模块。

jiemian.png

这里自动修正的功能能帮助我们将异常的格式不正确的json转为正确的格式,不过处于开发阶段,可以不必理会。

3、关键技术点&难点记录:

1、控制窗口Window

我们在新建一个桌面应用时,默认的模版又一个Appbar,此时应用可以用鼠标拖拽移动,放大缩小,还可以缩到很小。但是,我们一旦去掉这个导航栏,那么窗口就不能用鼠标拖动了,并且我们往往不希望用户将我们的窗口缩放的很小,这会导致页面异常,一些重要信息都展示不全。因此这里需要借助第三方组件bitsdojo_window。通过bitsdojo_window,我们可以实现窗口的定制化,拖动,最小尺寸,最大尺寸,窗口边框,窗口顶部放大、缩小、关闭的按钮等。

2、鼠标移动捕捉

通过InkWell组件,可以捕捉到手势、鼠标、触控笔的移动和停留位置

tip = InkWell(
    child: tip,
    hoverColor: Colors.white,
    highlightColor: Colors.white,
    splashColor: Colors.white,
    onHover: (value) {
      bool needChangeState = widget.showTip != value;
      if (needChangeState) {
        if (value) {
          // 鼠标在tip上,显示提示
          showTip(context, PointerHoverEvent());
        } else {
          overlay?.remove();
        }
      } 
      widget.showTip = value;
    },
    onTap: () {},
  );
复制代码

3、鼠标停在指定文字上时显示提示框,移开鼠标时隐藏提示框

这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框,可以使用Overlay。需要注意的是,由于在Overlay上的text的根结点不是Material风格的组件,因此会出现黄色的下划线。因此一定要用Material包一下text。并且你必须给创建的OverlayEntry一个位置,否则它将全屏显示。


Widget entry = const Text(
      '自动修复指输入的JSON格式不正确时,工具将根据正确的JSON格式自动为其补其确实内容如“”{}:等',
      style: TextStyle(
        fontSize: 14,
        color: Colors.black
      ),
      );

entry = Material(
      child: entry,
    );

// ... 其他代码
OverlayEntry overlay = OverlayEntry(
          builder: (_) {
            return entry;
          },
        );
       Overlay.of(context)?.insert(overlay);

       this.overlay = overlay;
  }
复制代码

4、读取鼠标拖拽的文件

读取说表拖拽的文件一开始想尝试使用InkWell组件,但是这个组件无法识别拖拽中的鼠标,并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件desktop_drop ,能满足要求。

5、本地文件选取

使用开源组件file_picker ,选完图片后的操作和拖拽选择图片后的操作一致。

6、TextField显示富文本

Textfield如果要显示富文本,那么需要自定义TextEditingController。并重写buildTextSpan方法。

class RichTextEditingController extends TextEditingController {

// ...

@override
  TextSpan buildTextSpan(
      {required BuildContext context,
      TextStyle? style,
      required bool withComposing}) {
    if (highlight) {
      TextSpan text;
      String? input = OutputManager().inputJSON;
      text = _serializer.formatRich(input) ?? const TextSpan();
      return text;
    }
    String json = value.text;
    return TextSpan(text: json, style: style);
  }
}
复制代码

7、导出文件报错

在做导出功能时遇到下列报错,保存提示为没有权限访问对应目录下的文件。

flutter: path= /Users/zl/Library/Containers/com.example.jsonFormat/Data/Downloads
[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: FileSystemException: Cannot open file, path = '/Users/zl/Library/Containers/com.example.jsonFormat/Data/Downloads/my_format_json.json' (OS Error: Operation not permitted, errno = 1)
复制代码

通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为com.apple.security.files.downloads.read-write ,表示对用户的下载文件夹的读/写访问权限。那么,使用Xcode打开Flutter项目中的mac应用,修改工程目录下的DebugProfile.entitlements文件,向entitlements文件中添加com.apple.security.files.downloads.read-write,并将值设置为YES,保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。

当然,这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将entitlements文件的App Sandbox设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制,因此这个选项慎用。


TODO List:

  • json自动修正
  • 模型代码高亮
  • 自定义导出路径

参考文档:

Flutter桌面支持

Flutter desktop support

Flutter-2天写个桌面端APP

pub.dev-window

Flutter Desktop - bitsdojo-window - bilibili

Apple开发权限文档

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改