一起看 I/O | Flutter 2.2 更新详解

谷歌开发者

于 2021-05-26 12:30:00 发布

阅读量749

点赞数

文章标签： xhtml gwt mooc 办公软件 iot

本文链接：https://blog.csdn.net/googledevs/article/details/117308530

版权

Flutter 2.2稳定版带来了性能提升、新功能和改进，包括Dart 2.13的支持，Flutter web的优化如字体特性、无障碍功能增强，iOS的页面转场加速和增量式安装。此外，还更新了文本处理方式、滚动条行为，并引入了更多Material图标。预览版功能包括iOS着色器编译性能改进和Android延迟加载组件支持。开发者可以关注新版本的改进，提升应用质量和用户体验。

摘要由CSDN通过智能技术生成

Flutter 2.2 版已正式发布！要获取新版本，您只需切换到 stable 渠道并更新目前安装的 Flutter，或前往 flutter.cn/docs/get-started 从头开始安装。

虽然与 2.0 版只相隔数月，2.2 版还是满载大量改进。此版本共计纳入了框架、引擎和插件库等方面的 2,456 个 PR 并解决了 3,105 个问题。我们要特此鸣谢为此版本贡献了大量 PR 和 PR review 的整个 Flutter 社区，包括 PR 贡献最多 (17) 的 Abhishek01039 和 PR review 贡献最多 (9) 的 xu-baolin。衷心感谢所有开发者对 Flutter 2.2 顺利发布稳定版做出的贡献。没有大家的支持，我们将无法做到。

Abhishek01039
https://github.com/Abhishek01039
xu-baolin
https://github.com/xu-baolin

每个新的 Flutter 稳定版都会带来诸如性能提升、新功能、bug 修复等一系列变化，并会提供一些尚未试用于生产环境的试验性功能，希望您能帮助我们验证这些功能能否正常工作并满足您的需求。此外，新版本还会包含一系列相关工具的更新和来自 Flutter 社区的更新。坦白讲，如今 Flutter 每个新版本的内容都非常丰富，不可能在一篇文章中巨细无遗地详述，因此下面我们将着重为您介绍一些主要亮点。

Flutter 2.2 稳定版更新

此版本在 Flutter 2 的基础上做了诸多改进，其中不但有面向 Android、iOS 和 web 平台的更新，还有新的 Material 图标、文本处理方式的改进、滚动条行为的变化、TextSpan widget 的鼠标光标支持，以及用一份代码适配多个平台方面的新指南。这些功能皆已发布稳定版，可供您在正式版应用中使用。同时，所有这些功能都是在新版 Dart 的基础上构建而成。

Dart 2.13

随 Flutter 2.2 版一起发布的还有 Dart 2.13 版。此 Dart 版本包含众多新功能，其中之一是新的类型别名，该功能让您可为类型创建别名，就像为函数创建别名一样:

// Type alias for functions (existing)
typedef ValueChanged<T> = void Function(T value);


// Type alias for classes (new!)
typedef StringList = List<String>;


// Rename classes in a non-breaking way (new!)
@Deprecated("Use NewClassName instead")
typedef OldClassName<T> = NewClassName<T>;

有了类型别名，您可为长而复杂的类型赋予简短易懂的名称，并以不会破坏代码的方式重命名您的类。Dart 2.13 版还包含其他多项更新，您可以在我们之前的推文 Dart 2.13 版本发布中了解详情。

Flutter web 更新

作为 Flutter 稳定版最新支持的平台，web 平台在此版本也有多项改进。

首先，我们借助新的 service worker 加载机制优化了缓存行为，并修复了 main.dart.js 的重复下载问题。在旧版 Flutter web 中，service worker 会在后台下载应用更新，用户在此期间可照常使用应用的旧版本。更新下载完毕后，用户要多次刷新浏览器页面后才会看到相应更新。在 Flutter 2.2 版中，当新的 service worker 检测到更新后，用户需要先等待更新下载完毕才能使用应用，但届时他们无需再次手动刷新页面即可看到更新内容。

要启用此项变更，您需要重新生成您的 Flutter 应用的 index.html。具体来说，请保存您的修改、删除 index.html 文件，然后在项目目录中运行 flutter create . 以重新生成该文件。

我们还对两个 web 渲染器都做了改进。在 HTML 渲染器上，我们添加了对字体特性的支持，以启用 FontFeature 设置并使用 canvas API 渲染文本，从而使鼠标悬停处的文本能够显示在适当的位置。在 HTML 和 CanvasKit 渲染器上，我们新增了对着色器遮罩 (shader masks) 和 computeLineMetrics 的支持，以解决 Flutter web 应用和移动应用两者不一致的问题。例如，开发者现在可以通过不透明度遮罩使用着色器遮罩实现淡出转场，并像在移动应用中一样使用 computeLineMetrics。

字体特性
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
FontFeature
https://api.flutter-io.cn/flutter/dart-ui/FontFeature-class.html
computeLineMetrics
https://api.flutter-io.cn/flutter/painting/TextPainter/computeLineMetrics.html
不透明度遮罩
https://api.flutter-io.cn/flutter/widgets/Opacity-class.html

无障碍功能不但是 Flutter web 的一大重点，也是整个 Flutter 的一个重心所在。按照设计，是通过构建 SemanticsNode 树来实现无障碍功能。Flutter web 应用的用户启用无障碍功能后，我们会生成一个与 RenderObject DOM 树并行的 DOM 树，并将语义属性转换为 Aira。在此版本中，我们改进了语义节点位置，消除了移动应用和 web 应用在使用转换 (transform) 时的不一致，这意味着在使用转换对 widget 进行样式设置时，焦点框会正确地显示在元素上方。如需直观了解其实际效果，您可以观看 Material Design 无障碍项目负责人 Victor Tsaran 的视频，了解他如何对 Flutter Gallery App 使用 VoiceOver:

如何对 Gallery App 使用 VoiceOver

我们现在还提供一个适用于性能分析 (profile) 和发布 (release) 模式的命令行 flag，以供开发者访问语义节点调试树，并直观查看系统为其 web 应用创建的语义节点，从而对应用的无障碍功能进行调试。

要为您的 Flutter web 应用启用此功能，请运行以下命令:

$ flutter run -d chrome --profile \
  --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

激活该 flag 后，您将能够在各个 widget 上方看到您的语义节点，从而进行调试并检查语义元素的位置是否符合预期。如果您发现这类问题，欢迎向我们提交 bug 报告:

https://goo.gle/flutter_web_issue

虽然在核心无障碍功能的支持方面已经取得了长足进步，但我们仍在这个领域不断改进。在 2.2 稳定版之后的 master 和 dev 渠道 build 中，我们新增了一个 API，供开发者以编程方式为其应用自动启用无障碍功能，同时我们正在着手解决在屏幕阅读器中使用 Tab 键的问题。

自动启用无障碍功能
https://github.com/flutter/engine/pull/25830
在屏幕阅读器中使用 Tab 键
https://github.com/flutter/engine/pull/25797

最后但也同样重要的是，最新版的 Flutter DevTools 现在还支持为您的 Flutter web 应用使用布局浏览器。

您现在可以在 web 应用中使用您所熟悉的布局调试工具，这与移动应用和桌面应用别无二致。

iOS 页面转场和增量式安装

对于 iOS 平台，此版本将动画帧的渲染时间缩减了 75%，使 Cupertino 主题中页面转场更流畅。在低端手机上的缩减比例甚至可能更高。我们不仅改善了最终用户可感知到的性能，还一直在想方设法提升开发性能。

使 Cupertino 主题中页面转场更流畅
https://github.com/flutter/flutter/pull/75670

在此版本中，我们实现了开发过程中的增量式 iOS 安装。基准测试结果显示，iOS 应用的更新版本安装时间缩短了 40%，这也就缩短了您的应用变更测试周期。

增量式 iOS 安装
https://github.com/flutter/flutter/pull/77756

使用 Flutter 构建平台自适应应用

随着 Flutter 稳定版逐步支持更多平台，您在设计应用时不仅需要考虑兼容不同的设备类型 (如手机、平板电脑和桌面电脑)，还需要考虑支持不同的输入方式 (触摸与键鼠)，以及适配各个平台上的不同使用习惯 (例如在导航时是使用抽屉式导航栏还是系统菜单)。如果应用能够根据不同目标平台的细节差异做出相应调整，我们就称之为平台自适应应用。

如果您想初步了解在构建平台自适应应用时要考虑哪些因素，请观看 Kevin Moore 关于 "构建平台自适应应用" 的视频。如需详细了解，您可以阅读 Flutter 文档中关于平台自适应应用的指南:

https://flutter.cn/docs/development/ui/layout/building-adaptive-apps

构建平台自适应应用
https://events.google.com/io/session/868dfd56-7f8c-49ee-84ad-ac69a23ba19d?lng=en

最后，如需参考遵循这些指南编写出的多平台应用示例。我们建议您看看 gSkinner 打造的 Flokk 和 Flutter Folio 应用。您既可以下载 Flokk 和 Folio 的源代码，也可以从各个应用商店下载 Flokk 和 Folio 应用，还可以直接在浏览器中运行它们。另一个优秀示例是用于创建指南本身的应用:

https://www.youtube.com/watch?v=8YUIrIGGc3Y