一文了解 Flutter 3.24 中的新功能和增强功能

  

作者 / Kevin Chisholm

  

欢迎查收最新的 Flutter 更新！Flutter 3.24 推出了很多令人兴奋的新功能和增强功能，以提拔您的应用开发体验。此次发布的亮点是 Flutter GPU 的预览版，可直接在 Flutter 中渲染高级图形和 3D 场景。Web 应用现在可以嵌入多个 Flutter 视图，从而提高应用的多功能性。末了，我们添加了视频广告变现支持，以资助您实现收入最大化。

  

在已往的几个月里，Flutter 社区非常活跃，共提交 852 个框架和 615 个引擎。在此，我们对资助我们完成此版本的 49 位新贡献者表现诚挚的感谢。各位的奉献和热情是推动 Flutter 前进的动力。

  

欢迎您阅读文章，深入了解 Flutter 社区为最新版本带来的所有新功能和增强功能！

  Flutter 框架
  新的 Sliver
  

此版本中添加了新的 Sliver，可以组合在一起实现动态应用栏行为:

  

• PinnedHeaderSliver
  
  
• SliverResizingHeader
  
  

  

• PinnedHeaderSliver
  
  
  http://api.flutter.dev/flutter/widgets/PinnedHeaderSliver-class.html
  
  
• SliverResizingHeader
  
  
  https://api.flutter.dev/flutter/widgets/SliverResizingHeader-class.html
  
  

  

您可以利用这些新的 Sliver，在用户滚动浏览时使标头浮动、保持固定或调解其大小。这些新的 Sliver 雷同于现有的 SliverPersistentHeader 和 SliverAppBar Sliver，但 API 更简朴，可组合以得到更好的效果。

  

• SliverPersistentHeader
  
  
  https://api.flutter.dev/flutter/widgets/SliverPersistentHeader-class.html
  
  
• SliverAppBar 
  
  
  https://api.flutter.dev/flutter/material/SliverAppBar-class.html
  
  

  

这些新的 Sliver 附带了新的示例代码。例如，PinnedHeaderSliver 的 API 文档中有一个示例，可以重现 iOS 设置应用的应用栏等效果:

  

  Cupertino 库更新
  

在此版本中，我们提高了 CupertinoActionSheet 的保真度。现在，系统会在您的手指滑过操纵表按钮时提供触感反馈。按钮的字体大小和粗细现在与原生按钮相匹配。

  

  

• CupertinoActionSheet
  
  
  https://api.flutter.dev/flutter/cupertino/CupertinoActionSheet-class.html
  
  

  

我们还为 CupertinoButton 添加了新的焦点属性，您现在可以对已禁用的 CupertinoTextField 自界说颜色。

  

• CupertinoButton
  
  
  https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html
  
  
• CupertinoTextField
  
  
  https://api.flutter.dev/flutter/cupertino/CupertinoTextField-class.html
  
  

  

对 Cupertino 库的更新正在进行中，请期待未来版本中的更多更新！

  TreeView
  

我们在 two_dimensional_scrollables package 中添加了 TreeView widget，以及几个配套类，用于构建可以在所有方向滚动的高性能树形结构。我们还更新了 package 中包含的示例应用，增长了几个利用 TableView 和 TreeView widget 的新示例。

  

  

• two_dimensional_scrollables 
  
  
  https://pub.dev/packages/two_dimensional_scrollables
  
  
• TreeView 
  
  
  https://pub.dev/documentation/two_dimensional_scrollables/latest/two_dimensional_scrollables/TreeView-class.html
  
  
• TableView
  
  
  https://pub.dev/documentation/two_dimensional_scrollables/latest/two_dimensional_scrollables/TableView-class.html
  
  

  

TreeSliver 也被添加到框架中，用于在一维滚动中构创建形结构。TreeView 和 TreeSliver API 相匹配，您可以轻松切换适合您用例的 API。

  

• TreeSliver
  
  
  https://api.flutter.dev/flutter/widgets/TreeSliver-class.html
  
  

  CarouselView
  

此版本包括了 Material Design 轮播界面 widget: CarouselView。CarouselView 呈现 "Uncontained" 结构: 答应项目滚动到容器边沿的可滚动项目列表，以及其前后的项目在视图表里滚动时，可以动态改变大小。

  

  

• Material Design 轮播界面
  
  
  https://m3.material.io/components/carousel/overview
  
  
• Uncontained
  
  
  https://m3.material.io/components/carousel/specs#477de3a1-c9df-4742-baf3-bcd5eeb3764c
  
  

  Widget 提供的更多功能
  

此版本包含一些改变焦点 widget 逻辑 (并非特定于设计) 位置的工作，即将焦点 widget 逻辑从 Material 库移至 Widget 库，以便更广泛地利用。这包括:

  

• Feedback widget，可用于轻松提供设备的触感和音频反馈，以响应点击、长按等手势。
  
  
• ToggleableStateMixin 和 ToggleablePainter，用于构建切换 widget 的基类，如复选框、开关和单选按钮。
  
  

  

• Feedback
  
  
  https://github.com/flutter/flutter/pull/148523
  
  
• ToggleableStateMixin 和 ToggleablePainter
  
  
  https://github.com/flutter/flutter/pull/148272
  
  

  增强的 AnimationStatus 枚举功能
  

得益于社区成员 @nate-thegrate 的卓越贡献，AnimationStatus 添加了增强的枚举功能，包括以下 getter:

  

• isDismissed
  
  
• isCompleted
  
  
• isRunning
  
  
• isForwardOrCompleted
  
  

  

• @nate-thegrate
  
  
  https://github.com/nate-thegrate
  
  
• 贡献
  
  
  https://github.com/flutter/flutter/pull/147801
  
  
• AnimationStatus
  
  
  https://api.flutter.dev/flutter/animation/AnimationStatus.html
  
  

  

其中一些 getter 已存在于 Animation 子类中，如 AnimationController 和 CurvedAnimation。现在，所有这些状态 getter 除了在 AnimationStatus 可利用之外，在 Animation 子类中也都可用。末了，AnimationController 还添加了一个 toggle 方法来切换动画的方向。

  

• Animation 
  
  
  https://api.flutter.dev/flutter/animation/Animation-class.html
  
  
• AnimationController
  
  
  https://api.flutter.dev/flutter/animation/AnimationController-class.html
  
  
• CurvedAnimation
  
  
  https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html
  
  
• toggle 
  
  
  https://api.flutter.dev/flutter/animation/AnimationController/toggle.html
  
  

  SelectionArea 更新
  

Flutter 的 SelectionArea 现在支持更多原生手势，好比用鼠标点击三次和在触摸设备上双击。默认情况下，SelectionArea 和 SelectableRegion widget 利用这些新手势。

  

• SelectionArea
  
  
  https://api.flutter.dev/flutter/material/SelectionArea-class.html
  
  
• SelectableRegion 
  
  
  https://api.flutter.dev/flutter/widgets/SelectableRegion-class.html
  
  

  

三次点击

  

• 三次点击 + 拖动: 扩展所选段落。
  
  
• 三次点击: 选择点击位置的段落。
  
  

  

  

双击

  

• 双击 + 拖动: 扩展所选词块 (支持在原生 Android/Fuchsia/iOS 和 iOS Web 上利用)。
  
  
• 双击: 选择点击位置的字词 (支持在原生 Android/Fuchsia/iOS 和 Android/Fuchsia Web 上利用)。
  
  

  

  引擎
  Impeller
  

提高性能和保真度

  

为了预期即将在稳定版本中移除 iOS 上的 Impeller 退出选项，我们一直在努力改进 Impeller 的性能和保真度。例如，一系列对文本渲染进行的改进大大提高了 emoji 滚动的性能，从而消除了当滚动大量 emoji 时产生的卡顿征象，这是对 Impeller 文本渲染能力的绝佳压力测试。

  

• 大大提高了 emoji 滚动的性能
  
  
  https://github.com/flutter/flutter/issues/138798
  
  

  

此外，通过办理一系列的问题，我们大大提高了此版本中 Impeller 文本渲染的保真度。特殊是文本粗细、间距和字距现在都与原生渲染器的文本保真度相匹配。

  

  

△ 之前 (字距不正确，字体也比预期的更细)

  

  

△ 之后

  

△ 之前 ("vergelijken" 中的间距不正确)

△ 之后

  

• 办理一系列的问题
  
  
  https://github.com/flutter/engine/pull/53042
  
  

  Android 上的 Impeller 预览版
  

在 Flutter 3.24 中，Android 上的 Impeller 仍为预览版。由于 Android 14 中的一个问题影响了 Impeller 用于平台视图的 API，我们延伸了预览期。Android 团队已经修复了这个问题，但很多已部署的设备仍将在短时间内运行未修复 Android 版本。由于办理这些问题意味着必要进行额外的 API 迁徙，所以稳定版本的发布时间会相应地延伸。出于谨慎考虑，也为了确保 Flutter 应用可以在更广泛的设备上运行，我们将 Impeller 设为默认渲染器的筹划推迟到今年发布稳定版本的时候。

  

• Android 14 中的一个问题
  
  
  https://github.com/flutter/flutter/issues/146499#issuecomment-2082873125
  
  

  

在 3.24 版本趋于稳定期间，我们会继续在 Android 上利用 Impeller 预览版，因此请各位 Flutter 开发者升级到最新的稳定版本。在启用 Impeller 后，如果遇到任何问题，请提交干系问题报告。当前阶段的反馈对于确保 Impeller 在 Android 平台上取得成功，以及我们可以或许在今年晚些时候自信地将其设为默认渲染器至关重要。由于 Android 硬件生态系统的多样化，关于 Impeller 最有价值的反馈应包含出现问题的具体设备型号和 Android 版本的详细信息。

  改进了缩放图像的默认设置
  

在此版本中，图像的默认设置 FilterQuality 已从 FilterQuality.low 改为 FilterQuality.medium。当一个图像宏大于其目标矩形时 (这是一种常见情况)，FilterQuality.low 会导致图像看起来更加 "像素化"，渲染速率比 FilterQuality.medium 更慢。展望未来，团队还在探索更适合各个 FilterQuality 级别的设置。

  Flutter GPU 预览
  

Flutter 为 Flutter GPU 的渲染功能引入了重大更新，可通过重要渠道获取。此底层图形 API 答应开发者利用 Dart 代码和 GLSL 着色器创建自界说渲染器，而无需任何原生平台代码。

  

Flutter GPU 拓展了 Flutter 的直接渲染能力，实现了高级图形和 3D 场景。此外，它必要 Impeller 渲染后端，目前支持在 iOS、macOS 和 Android 上利用。只管处于早期预览阶段，但最终 Flutter GPU 旨在支持所有 Flutter 平台。

  

此 API 答应完全控制渲染通道附件、顶点阶段和上传数据到 GPU。这种机动性对于创建复杂的渲染办理方案 (从 2D 角色动画到复杂的 3D 场景) 至关重要。

  

开发者可以通过切换到重要渠道并将 flutter_gpu package 添加到项目中来开始利用 Flutter GPU。接下来的几个月，我们将推出更多功能并提高稳定性，以及更高级别的渲染库 (如 flutter_scene)，以简化这些高级功能的利用。

  

您可以阅读 Flutter GPU 博文更深入地了解 Flutter GPU 及如何在项目中利用它。无论您是创建游戏还是复杂的图形，Flutter 新的 GPU 功能都将使其成为您产物的理想之选。

  

• Flutter GPU 博文
  
  
  https://medium.com/flutter/getting-started-with-flutter-gpu-f33d497b7c11
  
  

  Web
  多视图嵌入
  

Flutter Web 应用现在可以利用多视图嵌入功能，让开发者同时在多个 HTML 元素中渲染内容。此功能称为 "嵌入模式" 或 "多视图"，可机动地将 Flutter 视图集成到现有 Web 应用中。

  

在多视图模式下，Flutter Web 应用不会在启动时立即渲染，而是会等待主应用利用 addView 方法添加第一个 "视图"。主应用可以动态添加或移除这些视图，并且 Flutter 会相应地调解其 widget。

  

要启用多视图模式，请在 flutter_bootstrap.js 文件的 initializeEngine 方法中设置 multiViewEnabled: true。然后，您可以利用 JavaScript 管理视图，将其添加到指定的 HTML 元素中，并根据必要移除。每次视图添加和移除都会在 Flutter 中触发更新，从而实现动态内容渲染。

  

此功能特殊实用于将 Flutter 集成到必要利用多个独立 Flutter 视图的复杂 Web 应用。它还支持对每个视图自界说初始化数据，从而实现个性化设置和交互式体验。

  

您可以查察官方文档深入了解如何在 Flutter Web 应用中实现多视图嵌入。

  

• 官方文档
  
  
  https://docs.flutter.dev/platform-integration/web/embedding-flutter-web
  
  

  变现
  视频广告变现支持
  

我们推出了一个新的交互式媒体广告 (IMA) 插件，以支持在 Flutter 移动应用中完成插播视频广告变现。除了重要支持展示广告格式的现有 Google 移动广告 (GMA) 插件外，新的 IMA 插件还为 Flutter 应用提供了新的广告变现时机。

  

• 交互式媒体广告 (IMA) 插件
  
  
  https://pub.dev/packages/interactive_media_ads
  
  
• Google 移动广告 (GMA) 插件
  
  
  https://pub.dev/packages/google_mobile_ads
  
  

  

插播视频广告通常会在视频内容播放前 (前贴片广告)、播放中 (中插广告) 或播放后 (后贴片广告) 向用户展示。有些插播视频广告支持跳过。

  

  

Flutter IMA 的优势:

  

• 在 Flutter 应用上通过视频播放器内容实现无缝变现。例如，您现在部署了 Flutter IMA 插件，便可在应用用户点击播放视频内容前先展示 15 秒的广告，再开始播放视频内容。
  
  
• 利用原生 IMA SDK 的相同优势，包括访问高级 Google 广告需求和行业标准合规性 (如 IAB VAST)。
  
  

  

• IAB VAST
  
  
  https://iabtechlab.com/standards/vast/
  
  

  

初始发布版本目前支持在 Android 和 iOS 平台上的前贴片广告，很快便会支持中插广告。您可以马上开始探索如何针对 Flutter 应用视频内容利用新的 IMA 插件，并将关于 GitHub 的任何问题或疑虑告诉我们。

  

• GitHub
  
  
  https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+interactive_media_ads%22
  
  

  

欢迎您查阅干系资源: 插件指南、示例应用、Git 代码库。

  

• 插件指南
  
  
  https://pub.dev/packages/interactive_media_ads
  
  
• 示例应用
  
  
  https://pub.dev/packages/interactive_media_ads/example
  
  
• Git 代码库
  
  
  https://github.com/flutter/packages/tree/main/packages/interactive_media_ads
  
  

  iOS
  Swift Package Manager 初始支持
  

如今，Flutter 利用 CocoaPods 来管理原生 iOS 或 macOS 依靠项。

  

Flutter 3.24 增长了对 Swift Package Manager 的早期支持。这会带来以下几项好处:

  

• 访问 Swift package 生态系统。Flutter 插件将可以或许利用不绝增长的 Swift package 生态系统！
  
  
• 简化 Flutter 安装。Swift Package Manager 已与 Xcode 绑定。未来，您无需安装 Ruby 和 CocoaPods 即可在 Apple 平台上利用 Flutter。
  
  

  

• Swift package
  
  
  https://swiftpackageindex.com/
  
  

  

我们鼓励插件作者实验在您的插件中添加对 Swift Package Manager 的支持，并向我们反馈您的利用体验。

  

• 实验在您的插件中添加对 Swift Package Manager 的支持
  
  
  https://docs.flutter.dev/packages-and-plugins/swift-package-manager/for-plugin-authors#how-to-add-swift-package-manager-support-to-an-existing-flutter-plugin
  
  

  

如果您要针对 Flutter 对 Swift Package Manager 的支持提供反馈，请提交问题报告。

  

• 提交问题报告
  
  
  https://github.com/flutter/flutter/issues/new/choose
  
  

  生态系统
  Shared Preferences 插件更新
  

我们向 shared_preferences 插件添加了两个新的 API: SharedPreferencesAsync 和 SharedPreferencesWithCache。最重要的变革是，Android 实现利用的是 Preferences DataStore 而不是 Shared Preferences。

  

• shared_preferences
  
  
  https://pub.dev/packages/shared_preferences
  
  

  

SharedPreferencesAsync 答应用户直接调用平台，以获取设备上最新保存的偏好设置。与利用缓存版本不同的是，调用方式为异步，速率稍慢。这对于可以通过其他系统或 isolates 更新的偏好设置非常有用，由于这些更新会使缓存变得过时。

  

SharedPreferencesWithCache 构建在 SharedPreferencesAsync 的底子之上，答应用户同步访问当地缓存的偏好设置副本。此 API 与旧的 API 雷同，但现在可以利用不同的参数进行多次实例化。

  

当宿世态系统中最常用的插件之一是 SharedPreferences API，未来这些新的 API 会取而代之，但生态系统切换到新的 API 也必要肯定的时间。

  2024 年欧洲 Flutter 和 Dart Package 生态系统峰会
  

  

作为 2024 年 Fluttercon Europe 的一部分，我们举行了首届线下 Flutter 和 Dart Package 生态系统峰会，这是 2023 年 8 月举行的首届线上峰会的延续。欢迎您查察峰会的要点摘要。

  

• 要点摘要
  
  
  https://docs.google.com/document/d/e/2PACX-1vRFLdpIJYO5YPARcyUT1FYPzwkFb1hxh_agqnCXxsyirXocLZS5jobs3xFV5ZGpSQHLHZiBzqbJlXNV/pub
  
  

  

我们很高兴地公布，下届峰会将于 2024 年 9 月 20 日在纽约市的 Fluttercon USA 举行！如果您是 package 作者或贡献者，并且希望参加这次峰会，欢迎您注册以预留位置。

  

• Fluttercon USA 
  
  
  https://flutterconusa.dev/
  
  
• 注册
  
  
  https://rsvp.withgoogle.com/events/flutter-package-ecosystem-summit-usa-2024
  
  

  

此次峰会汇聚了 package 作者和维护者，围绕以下主题举行非正式集会的讨论:

  

• 主题 1 - 原生互操纵性的已往、现在和未来
  
  
• 主题 2 - 可持续的 package 维护模子
  
  
• 主题 3 - 办理 package 生态系统碎片化的问题
  
  

  

我们相信此次峰会 (特殊是在融入更广泛的 Flutter 和 Dart 活动之后) 将为社区公开讨论提供宝贵的平台，不仅有助于揭示关键挑战，还能为办理方案集思广益。我们期待与社区相助，在未来举行更多此类峰会。

  DevTools 和 IDE
  

此版本对 Flutter DevTools 工具套件进行了一些令人兴奋的改进。

  

如果您也好奇 Flutter 应用是否可以构建超出预期的 Widget 数目，DevTools Performance 工具中的新功能可以助您办理这个问题。利用新的重建统计数据 (Rebuild Stats) 功能，您可以捕获应用中乃至特定 Flutter 框架中 widget 构建次数的信息。

  

  

△ DevTools Performance 工具跟踪重建统计数据的屏幕截图。

  

我们对网络性能分析器 (Network profile) 和 Flutter Deep Links 等工具进行了优化和关键错误修复，并进行了一些通例改进，以便您在 IDE 中利用 DevTools 时得到更好的体验。说到 IDE，您是否知道可以直接在 IDE 中利用各种 DevTools 工具呢？

  

  

△ 在 VS Code 窗口中打开 DevTools 屏幕。

  

△ 在 Android Studio 工具窗口中打开 DevTools 屏幕。

  

此版本包括在 VS Code 中对 Flutter 侧边栏所作的改进，旨在让您可以更轻松地访问所需工具。您可以升级到最新版本的 VS Code 以及 Flutter 和 Dart 扩展步调，以访问改进后的侧边栏。

  

  

△ Flutter 侧边栏具有自适应性，可根据您的工作区进行缩放

  

此版本还包括对 DevTools 扩展框架所作的一些重大改进。现在，无论您是调试 Dart 或 Flutter 测试，还是不调试任何内容，只在 IDE 中编写代码，都可以利用 DevTools 扩展 (由某个 package 依靠项提供的工具)。如果您想在这些过程中利用工具 (或构建工具)，现在即可实现。

  

• DevTools 扩展
  
  
  https://docs.flutter.dev/tools/devtools/extensions
  
  

  

如需详细了解 Flutter 3.24 中包含的所有更新，欢迎您查察 DevTools 2.35.0、2.36.0 和 2.37.2 的版本说明。

  

• 2.35.0
  
  
  https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.35.0
  
  
• 2.36.0 
  
  
  https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.36.0
  
  
• 2.37.2
  
  
  https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.37.2
  
  

  重大变更和弃用
  

此版本中的重大变更包括对 Navigator 页面 API、PopScope 中的通用类型、Flutter Web 的默认渲染器所作的更改以及一些新的弃用关照。您可以参阅重大变更的迁徙指南了解完备列表。

  

• Navigator 页面 API
  
  
  https://docs.flutter.dev/release/breaking-changes/navigator-and-page-api
  
  
• PopScope 中的通用类型
  
  
  https://docs.flutter.dev/release/breaking-changes/popscope-with-result
  
  
• Flutter Web 的默认渲染器
  
  
  https://docs.flutter.dev/platform-integration/web/renderers
  
  
• 重大变更的迁徙指南
  
  
  https://docs.flutter.dev/release/breaking-changes
  
  

  

一如既往，我们非常感谢社区为测试工作所做的贡献，资助我们识别以上重大变更。如要了解详情，您可以查察 Flutter 的重大变更政策。

  

• 测试工作所做的贡献
  
  
  https://github.com/flutter/tests/blob/master/README.md
  
  
• Flutter 的重大变更政策
  
  
  https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
  
  

  总结
  

Flutter 成功的焦点在于由大家组成的卓越社区。大家的倾情贡献和刚强热情推动了此版本的诞生。衷心感谢大家。

  

如要深入了解此版本更新的具体内容和成果，欢迎您参阅 Flutter 3.24 的版本说明和更新日志，以获取新增功能的详尽列表。

  

• 版本说明
  
  
  https://docs.flutter.dev/release/release-notes/release-notes-3.24.0
  
  
• 更新日志
  
  
  https://github.com/flutter/flutter/blob/main/CHANGELOG.md
  
  

  

Flutter 3.24 以及 Dart 3.5 现已在稳定渠道中正式发布。利用最新版 Flutter 踏上全新开发旅程，就像运行 "flutter upgrade" 一样轻松。期待看到您用 Flutter 开发的杰作！

  

  

  

  

  

谷歌开发者特殊招募活动进行中

  

诚邀热爱技术的你参加

  通过多种情势 (文章/视频/coding 等) 创作与 Google 技术干系的解说分享、实践案例或活动感受等内容，以及分享您应用 AI 技术的故事履历与成果。我们将为您提供平台和资源，助力您在分享中提拔技能。更有惊喜权益等您领取，快来报名参与吧！
  

---

  

 点击屏末 | 阅读原文 | 马上了解 Flutter 社区的最新资讯

  

  

  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。