Flutter 2.2 更新详解

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 顺利发布稳定版做出的贡献。没有大家的支持，我们将无法做到。

每个新的 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。

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

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

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