[译] Flutter 3.10 中的新功能

原文:https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

欢迎使用 Flutter 3.10!我们迫不及待地想展示我们令人惊叹的 Flutter 社区所做的巨大努力。这个Flutter版本运行令人难以置信的Dart 3,今天也可以使用了!

Flutter 3.10 包括对 Web、移动、图形、安全性等方面的许多改进。我们开始谈正事吧!

Framework

Material 3

Material library 现在符合最新的Material Design 规范。这次更新包括新的组件和组件主题,更新的组件视觉效果等。开发者要使用新的特性必须先使用 opt in来导入这些特性。在下一个稳定版中,use Material3 默认为 true

要选择加入 Material libraryM3 版本,请在您的 MaterialApp 主题中进行设置useMaterial3 : trueflutter create 创建新应用程序时,该命令会将其添加到您的主题中。

要预览这些变化,请查看 DemoApp. 该演示可以让你查看切换 useMaterial3 开与关的效果。

ColorScheme.fromImageProvider()

所有M3组件都配置了主题的ColorScheme的默认颜色。默认的颜色方案使用深浅不一的紫色。你可以从一个单一的 seed 颜色或从一个图像创建一个自定义的颜色方案。在演示中尝试这两种变化。生成的配色方案应该看起来不错,而且可以使用。

image.png

NavigationBar

这提供了一个M3版本的BottomNavigationBar小部件。虽然 M3 使用了不同的颜色、高亮和标高,但它的工作原理与以前一样。要覆盖NavigationBars小组件的默认外观,请使用NavigationBarTheme小组件。虽然你不需要把现有的应用程序迁移到这个组件上,但你应该把它用于新的应用程序。

image.png

NavigationDrawer

这提供了一个基于Drawer小组件的M3目的地选择小组件。 NavigationDrawer显示了一个NavigationDestinations部件的单选列表。你也可以在这个列表中包括其他小部件。NavigationDrawer在需要时可以滚动。要覆盖NavigationDrawers小部件的默认外观,请使用NavigationDrawerTheme小部件。

image.png

SearchBar and SearchAnchor

这些组件为搜索查询提供预测性文本。当用户输入一个搜索查询时,该应用程序在 "搜索视图 "中计算出一个匹配的响应列表。用户要么选择一个,要么调整查询。要覆盖这些组件的M3设计,请使用SearchBarThemeSearchAnchorTheme小工具。

image.png

Secondary Tab Bar

M3允许你创建第二层的标签内容。为了区分这个第二层的 TabBar,可以使用 TabBar.secondary

image.png

DatePicker updated for M3

M3 DatePicker更新了日历和文本框版本的颜色、布局和形状。这并没有改变API,但增加了一个新的DatePickerTheme

image.png

TimePicker updated for M3

M3 TimePickerDatePicker一样,更新了普通版和紧凑版小组件的颜色、布局和形状。

image.png

BottomSheet updated for M3

除了M3颜色和形状的更新,底层页面现在增加了一个可选的拖动手柄,当你把showDragHandle设置为true时,就会包含 drag handle

image.png

ListTile updated for M3

M3的ListTile更新了这个小部件的位置和间距。这包括内容填充、前导和尾随小部件对齐、最小前导宽度和垂直间距。API保持不变。

image.png

Drawer updated for M3

M3的 Drawer更新了颜色和标高,同时做了一些小的布局改动。

TextField Updates

M3 updates all TextField widgets to support native gestures. Double clicking or triple clicking with a mouse work the same as double tapping or triple tapping on a touch device. By default, the TextField and CupertinoTextField widgets use these features.

M3更新了所有的 TextField 部件以支持本地手势。用鼠标双击或三击的效果与触摸设备上的双击或三击相同。默认情况下, TextFieldCupertinoTextField 小组件使用这些功能。

TextField double click/tap gestures

  • Double click + drag:  功能拓展
  • Double tap + drag:  功能拓展

image.png

TextField triple click/tap gestures

Triple click

  • 在多行 TextField 内,在点击的位置选择一个段落块(Android/Fuchsia/iOS/MacOS/Windows)。
  • 当在多行 TextField "内,在点击的位置上选择一个行块(Linux)。
  • 选择单行 TextField 中的所有文本。

Triple tap

  • 在多行 TextField 内,选择被点击位置的段落块。
  • 选择单行 TextField 中的所有文本。

Triple click + drag

  • 在段落块中扩展选择(Android/Fuchsia/iOS/MacOS/Windows)。
  • 在行块中扩展选择(Linux)。

image.png

Flutter supports SLSA level 1

Flutter框架现在与软件工件的供应链级别(SLSA)Level 1 进行编译。这实现了许多安全功能的实施,包括:

  • Scripted build process : Flutter的构建脚本现在允许在可信的构建平台上进行自动构建。在受保护的架构上构建有助于防止工件被篡改,从而提高供应链的安全性。
  • Multi-party approval with audit logging : Flutter发布工作流程仅在多个工程师批准后执行。所有的执行都会创建可审计的日志记录。这些变化确保没有人可以在源代码和工件生成之间引入变化。
  • Provenance. 测试版和稳定版现在都用 provenance 构建。这意味着具有预期内容的可信来源构建了框架发布的工件。每个版本都在 SDK档案 上发布了查看和验证来源的链接。

image.png

这项工作还允许团队朝着 SLSA L2 和 L3 合规性迈进。这两个级别侧重于在构建过程中和之后保护工件。

Web

Flutter Web 应用程序改进了加载时间

此版本减小了图标字体的文件大小。它从 Material 和 Cupertino 中删除了未使用的字形。

CanvasKit 缩小了所有浏览器的大小

基于 Chromium 的浏览器可以使用更小的自定义 CanvasKit“风格”。托管的 CanvasKit 从谷歌行业领先的 CDN 提供服务。这应该会进一步提高性能。

元素嵌入

您现在可以从页面中的特定元素提供 Flutter 网络应用程序。在此版本之前,您的应用程序可以填充整个页面主体或显示在iframe标记内。可以在 GitHub 中找到示例代码。

着色器支持

Web 应用程序可以使用 Flutter 的片段着色器支持

Engine

Impeller

在 3.7 稳定版中,我们在 iOS 上预览了Impeller 。从那时起,我们收到并解决了用户的大量反馈。在此版本中,我们对 Impeller 进行了 250 多次提交,我们将 Impeller 设置为 iOS 上的默认渲染器。默认情况下,所有使用 Flutter 3.10 为 iOS 构建的应用程序都使用 Impeller。这些 iOS 应用程序将有更少的卡顿和更一致的性能。

自 3.7 版本以来,iOS 上的 Impeller 改进了内存占用。Impeller 使用较少的渲染通道和中间渲染目标。在较新的 iPhone 上,启用有损纹理压缩可在不影响保真度的情况下减少内存占用。这些进步也显着提高了 iPad 的性能。

image.png

考虑一个复杂的屏幕,比如Wonderous应用程序中的“pull quote”屏幕。总之,这些改进将这些屏幕的内存占用量减少了近一半。内存使用量的减少也适度降低了 GPU 和 CPU 负载。Wondrous 应用程序可能不会记录负载下降。它的框架之前已经低于预算,但这一变化应该会延长电池寿命。

Impeller 还释放了团队更快地交付流行功能请求的能力。一个示例导致在 iOS 上支持更广泛的 P3 色域。在这篇文章的其他地方查看该功能的描述。

社区贡献加速了我们的进步,特别是 GitHub 用户ColdPaleLightluckysmg。他们编写了多个与 Impeller 相关的补丁,提高了保真度和性能。

虽然 Impeller 满足大多数 Flutter 应用程序的渲染需求,但您可以选择退出 Impeller。如果您选择退出,请考虑在 GitHub 上提交问题以告诉我们原因。应用程序用户可能会注意到 Skia 和 Impeller 在渲染时存在细微差别。这些差异可能是错误,所以不要犹豫,提出问题。在未来的版本中,我们将删除适用于 iOS 的旧版 Skia 渲染器以减小 Flutter 的大小。

Impeller 的 Vulkan 后端继续取得进展。Android 上的 Impeller 仍在积极开发中,但尚未准备好进行预览。我们计划在不久的将来分享更多相关信息。

要了解我们的进展,请查看我们的 GitHub 项目板

Performance

此版本涵盖了除 Impeller 之外的更多性能改进和修复。

## Eliminating Jank 消除卡顿

我们要感谢开源贡献者luckysmg。他们发现他们可以缩短从 Metal 驱动程序获取下一个可绘制层的时间。要获得该奖励,您需要将FlutterViews背景颜色设置为非零值。此更改消除了最近 iOS 120Hz 显示器上的低帧率。在某些情况下,它会使帧速率增加三倍。 这帮助我们解决了六个 GitHub 问题。这一变化意义重大,以至于我们向后移植了一个修补程序到 3.7 版本中。

在 3.7 稳定版中,我们将本地图像的加载从平台线程转移到 Dart 线程,以避免延迟来自平台线程的 vsync 事件。但是,用户 注意到Dart 线程上的这项额外工作也导致了一些卡顿。在此版本中,我们将本地图像的打开和解码从 Dart 线程移至后台线程。此更改消除了具有大量本地图像的屏幕上潜在的长时间停顿,同时避免了延迟 vsync 事件。在我们的本地测试和自动化基准测试中,此更改将多个同步图像的加载时间缩短了一半。

image.png

我们继续在 Flutter 新的内部 DisplayList 结构之上构建优化。在此版本中,我们添加了基于 R-Tree 的剔除机制。这种机制在我们的渲染器中更早地移除了绘制操作的处理。例如,此优化加速了输出在屏幕外失败的自定义画家。我们的微基准测试显示 DisplayList 处理时间最多减少了 50%。具有裁剪自定义绘画的应用程序可能会看到不同的改进。改进的程度取决于隐藏绘制操作的复杂性和数量。

减少 iOS 启动延迟

应用程序包中标识符查找的低效策略增加了应用程序启动延迟。此启动延迟的增长与应用程序的大小成正比。在此版本中,我们修复了 bundle identifier lookup。这将大型生产应用程序的启动延迟减少了 100 毫秒或大约 30–50%。

缩小尺寸

Flutter 用作SkParagraph文本整形、布局和渲染的默认库。我们包括了一个标志以回退到遗留libtxtminikin图书馆。由于我们对 有充分的信心SkParagraph我们 在此版本中删除了libtxt和以及他们的标志。minikin这将 Flutter 的压缩大小减少了 30KB。

Stability

在 3.0 版本中,我们在渲染管道后期启用了一项 Android 功能。此 Android 功能使用高级 GPU 驱动程序功能。当只有一个“脏”区域发生变化时,这些驱动程序功能会重新绘制较少的屏幕。我们将此添加到早期的优化中,以达到类似的效果。尽管我们的基准测试结果鼓舞了我们,但还是出现了两个问题。首先,改进最多的基准可能不代表实际用例。其次,事实证明很难找到支持此 GPU 驱动程序功能的设备和 Android 版本集。鉴于有限的进步和支持,我们在 Android 上禁用了部分重绘功能。

使用 Skia 后端时,该功能在 iOS 上保持启用状态。我们希望在未来的版本中通过 Impeller 启用它。

API 改进

APNG解码器

Flutter 3.10 解决了我们最受关注的问题之一。它增加了解码图像的能力APNGAPNG您可以使用 Flutter 现有的图片加载 API 来加载图片。

图片加载 API 改进

受人尊敬的 Flutter 工程总监tvolkertdart:ui已对的图像加载 API进行了改进。我们添加了一个新方法 instantiateImageCodecWithSize。这支持加载满足以下三个条件的图像的用例:

  • 加载时宽高比未知
  • 边界框约束
  • 原始纵横比约束

一个例子是当一个应用程序试图显示从网络加载的可能性池中的一个图像时。

Mobile

iOS

无线调试

您现在可以在没有电缆的情况下运行和热重新加载您的 Flutter iOS 应用程序!在 Xcode 中成功无线配对您的 iOS 设备后,您可以使用 flutter run 将您的应用程序部署到该设备。如果您遇到问题,请在Window > Devices and Simulators > Devices下验证网络图标出现在您的设备旁边。要了解更多信息,请查看我们的文档

宽色域图像支持

iOS 上的 Flutter 应用现在可以支持宽色域图像的精确渲染。要使用宽色域支持,应用程序必须使用 Impeller 并在文件FLTEnableWideGamut中添加标志Info.plist

拼写检查支持

SpellCheckConfiguration()小部件现在默认支持Apple在 iOS 上的拼写检查服务。要使用此小部件,请使用spellCheckConfiguration中的参数对其进行设置CupertinoTextField

image.png

自适应复选框和单选

此版本将CupertinoCheckBoxCupertinoRadio小部件添加到库中Cupertino。他们创建符合 Apple 样式的复选框和单选按钮组件。

Material 复选框和单选小部件添加了.adaptive构造函数。在 iOS 和 macOS 上,这些构造函数使用相应的 Cupertino 小部件。在其他平台上,他们使用 Material 小部件。

优化 Cupertino 动画、过渡和颜色

Flutter 3.10 改进了一些动画、过渡和颜色以匹配 SwiftUI。这些改进包括:

image.png

平台视图性能

PlatformViews出现在屏幕上时,Flutter会限制iOS 上的刷新率以减少卡顿。当应用程序显示动画或可滚动时,应用程序用户会注意到这一点PlatformViews

macOS 和 iOS 可以在插件中使用共享代码

Flutter 现在支持插件文件sharedDarwinSource中的密钥。pubspec.yaml这个键表示 Flutter 应该共享 iOS 和 macOS 代码。

ios:  
    pluginClass: PathProviderPlugin  
    dartPluginClass: PathProviderFoundation  
    sharedDarwinSource: true  
macos:  
    pluginClass: PathProviderPlugin  
    dartPluginClass: PathProviderFoundation  
    sharedDarwinSource: true

应用扩展的新资源

我们为 Flutter 开发人员添加了使用 iOS 应用程序扩展的文档。这些扩展包括实时活动、主屏幕小部件和共享扩展。

为了简化创建主屏幕小部件和共享数据,我们向path_providerhomescreen_widget插件添加了新方法。

跨平台设计的新资源

该文档现在包括针对特定UI 组件的跨平台设计注意事项。要了解有关这些 UI 组件的更多信息,请查看Flutter UX GitHub 存储库中的讨论。我们感谢任何输入或反馈!

安卓

Android CameraX 支持

Camera X是一个 Jetpack 库,可简化向 Android 应用添加丰富的相机功能的过程。此功能适用于多种 Android 相机硬件。在此版本中,我们为 Flutter Camera 插件添加了对 CameraX 的初步支持。此支持涵盖以下用例:

  • 图像捕捉
  • 视频录制
  • 显示实时相机预览

要尝试一下,请选择使用 CameraX 实现。要选择加入,请将以下行添加到您的pubspec.yaml 文件中。

    Dependencies:  
        camera: ^0.10.4 # 最新相机版本  
        camera_android_camerax: ^0.5.0

我们希望收到您的反馈,因为我们将继续添加更多 CameraX 功能,然后将 CameraX 设为默认实现。

开发者工具

我们继续改进 DevTools,这是一套用于 Dart 和 Flutter 的性能和调试工具。一些亮点包括:

  • DevTools UI 使用 Material 3。这既使外观现代化又增强了可访问性。
  • DevTools 控制台支持在调试模式下评估正在运行的应用程序。在此版本之前,您只能在暂停应用程序时执行此操作。
  • 嵌入式Perfetto 跟踪查看器取代了以前的时间线跟踪查看器。Perfetto 可以处理更大的数据集,并且比传统的跟踪查看器表现得更好。Perfetto 包含更多功能,例如:
    • 允许您固定感兴趣的线程。
    • 单击并拖动以从多个帧中选择多个时间轴事件。
    • 使用 SQL 查询从时间轴事件中提取特定数据。

image.png

要了解更多信息,请查看DevTools 2.23.1DevTools 2.22.2DevTools 2.21.1的发行说明。

弃用和重大更改

弃用的 API

此版本中的重大更改包括在 v3.7 发布后过期的弃用 API。要查看所有受影响的 API 以及其他上下文和迁移指南,请查看此版本的弃用指南Dart Fix可以修复其中的许多问题,包括在 IDE 中快速修复和使用dart fix命令批量应用。

Android Studio Flamingo 升级

将 Android Studio 升级到 Flamingo 后,您可能会在尝试 flutter run 或 flutter build Flutter Android 应用程序时看到错误。发生此错误是因为 Android Studio Flamingo 将其捆绑的 Java SDK 从 11 更新到 17。使用 Java 17 时, 7.3 之前的Gradle 版本无法运行。我们更新 flutter analyze --suggestions以验证是否由于 Java SDK 和 Gradle 版本之间的不兼容而发生此错误.

要了解修复此错误的不同方法,请查看我们的迁移指南

窗口单例弃用

此版本弃用了窗口单例。依赖它的应用程序和库应该从它迁移。当您的应用程序在未来版本的 Flutter 中启动时,这会为您的应用程序准备多窗口支持。

感谢社区

一如既往,非常感谢社区提供的测试,他们帮助我们识别这些重大变化。要了解更多信息,请查看我们的重大变更政策

总结起来

在我们结束此版本时,Google 的 Flutter 团队要感谢所有使此版本成为可能的贡献者。你们的奉献和辛勤工作帮助 Flutter 成为行业的游戏规则改变者,并继续革新应用程序开发。我们鼓励您开始探索 Flutter 的最新稳定版本,以利用它提供的所有惊人功能。这样做,只是flutter upgrade!请继续关注 Flutter 未来更多激动人心的更新。

猜你喜欢

转载自juejin.im/post/7231731488928317495