flutter用户跟踪,flutter 监听

Flutter进阶篇（4）-- Flutter的Future异步详解

本文首发在公众号 Flutter那些事 ，欢迎大家多多关注。

创新互联是专业的芜湖县网站建设公司，芜湖县接单;提供成都网站设计、成都网站制作、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行芜湖县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

工具安装：

Flutter基础篇：

Flutter进阶篇：

Dart语法基础篇：

Dart语法进阶篇：

说明：本文中的所有函数的引用在 main 函数中：

这里的执行结果是：

Futue直接new就可以了。我这里没有具体的返回数据，所以就用匿名函数代替了， Future future = new Future(() = null); 相当于 FutureNull future = new Future(() = null); 泛型如果为null可以省略不写，为了便于维护和管理，开发中建议加上泛型。

输出结果是：

future里面有几个函数：

then ：异步操作逻辑在这里写。

whenComplete ：异步完成时的回调。

catchError ：捕获异常或者异步出错时的回调。

因为这里面的异步操作过程中没有遇到什么错误，所以catchError回调不会调用。

我们可以看到执行结果是：

我们可以看到输出结果是： 2 1 3 和我们创建Future对象的先后顺序完全一致。

我们可以看到结果为 1 2 3 ，和我们调用then的先后顺序无关。：

当then回调函数里面还有then回调的时候，这时候的流程跟前面就不太一样了，也是一个大坑，也是面试经常会被问到的一个知识点。

我们可以看到执行结果如下：

结果还是一样的：

运行结果是：

这里再次证明了上面我的猜想： 执行顺序和和创建Future的先后顺序有关，如果有多个then嵌套执行，先执行外面的then，然后执行里面的then。

执行结果如下，我们可以看到then内部创建的Future要等到then执行完了，最后再去执行的：

根据上文总结的特点，我们可以不用运行也能推断出输出结果：

为了验证我们的猜想，我们打印一下输出结果，果然我们的证明是正确的。

我们重点看看 then函数的文档说明：

then 注册在 Future 完成时调用的回调。

当这个 Future 用一个 value 完成时，将使用该值调用 onValue 回调。

如果 Future 已经完成，则不会立即调用回调，而是将在稍后的 microtask（微任务） 中调度。

如果回调返回 Future ，那么 then 返回的 future 将与 callback 返回的 future 结果相同。

onError 回调必须接受一个参数或两个参数，后者是[StackTrace]。

如果 onError 接受两个参数，则使用错误和堆栈跟踪时调用它，否则仅使用错误对象时候调用它。

onError 回调必须返回一个可用于完成返回的future的值或future，因此它必须是可赋值给 FutureOr R 的东西。

返回一个新的 Future ，该 Future 是通过调用 onValue (如果这个Future是通过一个value完成的)或' onError (如果这个Future是通过一个error完成的)的结果完成的。

如果调用的回调抛出异常，返回的 future 将使用抛出的错误和错误的堆栈跟踪完成。在 onError 的情况下，如果抛出的异常与 onError 的错误参数“相同(identical)”，则视为重新抛出，并使用原始堆栈跟踪替代

如果回调返回 Future ，则 then 返回的 Future 将以与回调返回的 Future 相同的结果完成。

如果未给出 onError ，并且后续程序走了刚出现了错误，则错误将直接转发给返回的 Future 。

在大多数情况下，单独使用 catchError 更可读，可能使用 test 参数，而不是在单个 then 调用中同时处理 value 和 error 。

请注意，在添加监听器(listener)之前， future 不会延迟报告错误。如果第一个 then 或 catchError 调用在 future 完成后发生 error ，那么 error 将报告为未处理的错误。

Flutter跨平台框架（Dart语言）

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。(-中文网；-英文网)

Flutter是一种趋势，势必会取代RN，成为最主流的跨平台开发框架，基于Dart语言。ios开发必须Mac电脑。android开发window、linux、Mac均可。

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转模型这块需要手写那繁杂的映射关系。就像下面这样子。

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

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

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

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

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

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

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

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

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

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

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

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

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

通过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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：