web 按钮快捷键_Flutter 1.12重磅发布：支持Web与macOS-CSDN博客

作者｜Chris Sells

链接｜https://dwz.cn/frdP0thp

四天前，前端年度“明星”Flutter 正式发布了最新版本 1.12。新版本有哪些值得关注的新特性和改进？来自 Flutter 开发团队的产品经理 Chris Sells 将为大家详细解读。

四天前，Flutter 1.12 正式发布，这是从 2018 年 12 月发布 1.0 版本以来的第 5 个稳定版。过去的一年是惊艳的一年！我们关闭了 5303 个 issue，合并了来自 484 个贡献者的 5950 个 PR，增加了对 Android App Bundles 和 iOS 13 的支持，实现了鼠标和键盘事件处理机制，发布了 App 内购买插件，合并了多个重要的性能改进，增加了 24 种本地化和多个新的小部件。另外，Flutter 工具本身也得到大幅改进。改进的 Dart DevTools 提供了部件检查器、内存 /CPU 分析以及增强的日志功能。此外，我们还加入了引用类型自动导入功能、对 ChromeOS 的显式支持、UI 指南，以及改进的错误消息呈现(格式化、颜色高亮和更多的可操作项)。

对于每一个版本，我们都怀着始终如一的信念——一切都才刚开始。这个版本也不例外，这是我们有史以来最大的一个版本，有 188 位贡献者参与，关闭了 4571 个 issue，合并了 1905 个 PR。

Flutter 框架

新版本完全支持 iOS 13 的暗色模式，加入了新的 Cupertino 小部件，做了一些 UX 调整，并带来大幅改进的 Add-to-App 体验。

完全支持 iOS 13 暗色模式

完全支持 iOS 13 主题模式是 Flutter 1.12 的一大亮点，包括支持 Cupertino 小部件的暗色模式。

从上图可以看到，对暗色模式的支持不仅仅是更换背景色，其他部分的颜色也匹配得恰到好处。另外，我们还新增了两个小部件。

CupertinoContextMenu 和 CupertinoSlidingSegmentedControl

为了让 Flutter App 看起来更像原生 App，我们还改进了滚动条保真度，提供了自适应的 CupertinoAlertDialog 填充，并允许为 CupertinoDatePicker 设定最小和最大日期限制。

改进的 Add-to-App 体验

新版本也带来了 Add-to-App(将 Flutter 集成到已有 Android 或 iOS App 的能力)方面的改进。我们努力简化集成流程，为开发者带来更好的体验，包括在 Android Studio 中加入新的 Flutter 模块向导。

Flutter 1.12 支持将全屏 Flutter 实例添加到 App 中，具体来说：

提供了稳定的平台集成 API(Java、Kotlin、Objective-C 和 Swift)，包括一组新的 Android 平台 API，更多详情请参看：http://flutter.dev/go/android-project-migration
可以在内嵌的 Flutter 模块里使用插件。
更多的集成方式，如通过 Android AAR 和 iOS Framework，获得与现有构建系统更好的兼容性。
重构了“flutter attach”机制(命令行工具、VSCode 和 IntelliJ 插件)，可以更容易地 attach 到运行中的 Flutter 模块进行调试或热重载。

后者演示了各种集成场景。

Dart 2.7

Dart 是 Flutter 的基础，所以，如果你还不知道扩展方法和字符串(包括 emoji)安全，或者你想知道如何通过非空类型实现 null safety

Flutter 1.12 稳定版之外

除了稳定版带来的新特性之外，Flutter 1.12 还提供了 Web 支持(beta 版)和 macOS 支持(alpha 版)。

Web 支持

Flutter 1.12 的 master、dev 和 beta 频道都提供了改进的 Web 支持。

如上图所示，Rivet 使用了 Flutter 的 Web 支持。Rivet 是一个教育类项目，目前在生产环境中提供了移动 App。他们使用 Flutter 和 Firebase 开发了 Web 版 App，计划于 2020 年初正式发布。

macOS 支持

对 macOS 的支持很快也会实现，目前正在从技术预览阶段进入到 alpha 阶段，master 和 dev 频道已经可用。

上图是新版本的 Flutter Gallery，除了支持 Android、iOS 和 Web，现在也支持 macOS。

Flutter 1.12 对桌面的支持由此跨出了一大步，包括新的 DataTree 和 Split 小部件、一些移植的插件，支持发布和调试模式，使用起来非常简单。你可以在 Flutter 的系统配置中启用对 macOS 的支持(master 和 dev 频道)：

$ flutter config — enable-macos-desktop

现在也可以使用“flutter create”创建一个可在 macOS 上运行的 Flutter 项目。

除了工具之外，我们也在改进适合桌面 App 的像素密度。移动 App 需要相对较大的控件，因为用户通过触控的方式使用控件，而对于桌面 App 来说，用户更倾向于使用鼠标。所以，对于桌面 App，Flutter 允许开发者选择控件的像素密度，让它们更好地迎合桌面用户的需求。

为了改进 Flutter 桌面 App 的体验，我们做了很多工作，改进了键盘导航和键盘访问方式，包括：

同步辅助按键和按键事件；
在下拉框打开的情况下选择列表项；
更方便地访问主焦点；
增加键盘导航、开关的悬浮和快捷键；
复选框和单选框按钮；
自动滚动，保持焦点项可见；
基于键盘快捷键的滚动；
用于处理焦点和悬浮的新部件；
重写了拷贝 / 粘贴和键盘选择；
使用键盘导航下拉框；
像素密度支持；
增加 macOS 功能键支持。

对 Windows 和 Linux 的支持还处在技术预览阶段，后续我们会更新这方面的进度

Flutter 工具

除了 Flutter 框架本身，Flutter 工具也有很多要说的，包括新版 DartPad、更强大的基于 IntelliJ 的 IDE(增加了一个叫作“Hot UI”的预览版功能)、增强的 Dart DevTools(增加了新的可视化布局视图)、在 VSCode 中同时调试多个设备、改进的 Android 构建流程，以及在测试过程中更好地分辨渲染组件。

DartPad

如果你还没用过 DartPad，一定要试一下！你可以在不安装任何东西的情况下尝试 Dart 的新特性。新版的 DartPad 现在支持 Flutter！

如上图所示，在左边写 Flutter 代码，在右边可以实时地看到运行结果，你可以不用安装任何东西就可以使用 Flutter。

除了 DartPad 本身，我们也在将 DartPad 加入到我们的文档和代码库中，这样开发者就可以在自己喜欢的浏览器上学习 Flutter

Hot UI

如果你在本地安装了 Flutter 工具，就会在 IntelliJ/Android Studio 的 Flutter 插件中看到一个新的预览功能。你可以在 IDE 中直接看到你正在开发的小部件。

这个功能叫作“Hot UI”，就像热重载一样，在修改代码的同时直接更新 UI。你还可以直接修改 UI(比如修改颜色)，这个修改也会直接反映到代码中。

Layout Explorer

不管你是手写代码，还是使用 Hot UI，代码都是免不了的，而有代码的地方就会有问题，这也就是 Dart DevTools 发挥作用的时候。我们在新版本的 DevTools 中加入了一个叫作“Layout Explorer”的新功能。

Layout Explorer 可以帮你可视化小部件的布局，你还可以通过交互式的方式修改布局选项。

多设备调试

在大部分情况下，Flutter UI 的开发和调试是在单个设备上完成的，如果能够同时在多个设备(物理设备或虚拟设备)上调试岂不是更好？VSCode 的 Flutter 插件现在可以支持多会话调试。

从上图可以看到，同一个 Flutter App 同时运行在三个不同的调试会话中。这个时候如果改一下代码，热重载功能会确保代码改动在三个 App 上都体现出来。如果设置了断点，不管是哪个 App 都可以触发断点。如果你想停止调试其中的一个 App，其他几个 App 不会受到影响。

改进的 Android 构建流程

在 Android 构建流程方面，我们解决了若干问题。首先，Android 构建流程更健壮了。我们让 Flutter 插件改用 AndroidX，并建议其他 App 和插件也使用 AndroidX。不过，对于未改用 AndroidX 的插件，如果遇到构建问题，我们提供了其他选择(使用 Android 归档文件和 Jetifier)。新的构建方式速度较慢，所以我们并没有把它作为主要的构建方式，但它解决了 95% 我们在构建过程中遇到的问题。

另一方面，我们用 R8 替代了 ProGuard。R8 是谷歌提供的一个新的代码优化器。在此之前，开发者需要根据插件指南手动配置 ProGuard 规则，而在新版本中，规则可以在插件源代码中定义好，R8 会自动解析这些规则，为开发者省去了很多麻烦。

另外，我们继续尝试给 Flutter 瘦身，把“Hello, World” App(Android 版)大小减小了 2.6%(从 3.8MB 减到了 3.7MB)。

模板图像测试

“模板图像”(Golden Image)是指给定小部件、状态、应用程序或其他可视元素的渲染主图像文件。在 Flutter 1.12 中，我们提供了 GoldenFileComparator 和 LocalFileComparator 类，用于进行图像像素比较(而不是按照比特比较)，避免误判。