猫哥学习站 ducafecat.com
登录

欢迎来到最新的 Flutter 更新！Flutter 3.24 充满了令人兴奋的新功能和增强功能，旨在提升您的应用开发体验。此版本重点介绍了 Flutter GPU 的预览版，它可以在 Flutter 中直接实现高级图形和 3D 场景。Web 应用现在可以嵌入多个 Flutter 视图，增强了您应用的多功能性。最后，我们添加了视频广告变现支持，帮助您最大化收益。

Flutter 3.24 中的新功能

flutter 3.24

视频

https://youtu.be/zTiRErezgbI

https://www.bilibili.com/video/BV1az421B7Co/

前言

原文 Flutter 3.24 中的新功能

欢迎来到最新的 Flutter 更新！Flutter 3.24 充满了令人兴奋的新功能和增强功能，旨在提升您的应用开发体验。此版本重点介绍了 Flutter GPU 的预览版，它可以在 Flutter 中直接实现高级图形和 3D 场景。Web 应用现在可以嵌入多个 Flutter 视图，增强了您应用的多功能性。最后，我们添加了视频广告变现支持，帮助您最大化收益。

在过去几个月里，Flutter 社区非常活跃，共有 852 个框架提交和 615 个引擎提交。我们很高兴欢迎 49 位新贡献者，他们帮助实现了这次发布。正是你们的投入和热情推动了 Flutter 的发展。

所以，深入探索并发现 Flutter 社区为这个最新版本带来的所有新功能和增强功能吧！

参考

https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4

Flutter 框架

新 Slivers

此发布添加了新的 Slivers 滑动条，这些滑动条可以组合在一起以实现动态应用栏行为：

你可以使用这些新的 Sliver 组件来制作在用户滚动时浮动、固定或调整大小的标题。这些新的 Sliver 组件与现有的 SliverPersistentHeader 和 SliverAppBar Sliver 类似，但具有更简单的 API，可以组合使用以实现更强大的效果。

这些新的细分组件带来了新的示例代码。例如， PinnedHeaderSliver 的 API 文档中有一个示例，可以重现类似 iOS 设置应用中的应用栏效果：

img

Cupertino 库的更新

在本次发布中，我们提高了 CupertinoActionSheet 的保真度。现在，当您在操作表的按钮上滑动手指时，会提供触觉反馈。按钮的字体大小和粗细现在与其原生对应项相匹配。

img

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

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

TreeView

two_dimensional_scrollables 包发布了 TreeView 小部件，同时还发布了多个配套类，用于构建可以随树状结构在各个方向滚动的高性能滚动树。包含在该包中的示例应用也已更新，新增了多个使用 TableView 和 TreeView 小部件的示例。

img

TreeSliver 也被添加到框架中，用于构建一维滚动的树。 TreeView 和 TreeSliver 的 API 相匹配，使得在适用于您使用场景的那个之间进行切换变得容易。

轮播视图

本次发布包含了 MATERIAL DESIGN 轮播图组件： CarouselView 。 CarouselView 展示了“无边界”的布局：一个可滚动的项目列表，滚动到容器的边缘，且在滚动出视图和滚动进视图时，首尾的项目可以动态改变大小。

Flutter CarouselView example

widgets 提供的更多功能

此发布包含了一些将非特定设计的核心小部件逻辑从 Material 库迁移到 Widgets 库以供更通用使用的工作。这包括：

  • Feedback 小部件提供了对通过轻触、长按等手势从设备获取触觉和音频反馈的便捷访问。
  • ToggleableStateMixin 和 ToggleablePainter ，用于构建切换小部件（如复选框、开关和单选按钮）的基础类。

为 AnimationStatus 增强枚举特性

在社区成员 @nate-thegrate 的出色贡献下，为 AnimationStatus 添加了增强的枚举功能，包括获取器：

  • isDismissed
  • isCompleted
  • isRunning
  • isForwardOrCompleted

这些获取器中有一些已经存在于 Animation 子类中，如 AnimationController 和 CurvedAnimation 。现在所有这些状态获取器都可以在 Animation 的子类中使用，除此之外还有 AnimationStatus。最后，在 AnimationController 中添加了一个 toggle 方法来切换动画的方向。

SelectionArea 选择区域的更新

Flutter 的 SelectionArea 现在支持更多与鼠标三击和触控设备双击相关的原生手势。 默认情况下， SelectionArea 和 SelectableRegion 小部件使用这些新手势。

三击点击

  • 三击并拖动：在段落块中扩展选区。
  • 三击：选择点击位置的段落块。

img

双击

  • 双击并拖动：以词块形式扩展选区（在原生 Android/Fuchsia/iOS 以及 iOS 网页中受支持）。
  • 双击：选择双击位置的单词（在原生 Android/Fuchsia/iOS 以及 Android/Fuchsia Web 上受支持）。

img

引擎

Impeller

提高性能和保真度

为了即将发布的稳定版本中移除 iOS 上的 Impeller 退出选项，团队一直在努力改进 Impeller 的性能和保真度。举个例子，对文本渲染进行的一系列长期改进大大提高了表情符号滚动的性能，在滚动大量表情符号时消除了卡顿现象，这对 Impeller 的文本渲染能力是一个极好的压力测试。

此外，通过解决一系列问题，我们还大幅提高了此版本中 Impeller 文本渲染的保真度。特别是，文本粗细、间距和字偶间距现在都与传统渲染器的文本保真度相匹配。

img

在前面 (请注意字距不正确，字体重量也比预期的轻。)

img

在之后

img

在前面 (注意不正确的空格，例如在“vergelijken”中)

img

在之后

Android 预览

在本次发布中，我们继续在 Android 上预览 Impeller。由于 Android 14 中的一个影响 Impeller 用于平台视图的 API 的 bug，我们延长了预览期。虽然 Android 团队已经修复了这个 bug，但许多已部署的设备在未来一段时间内仍将运行未修复版本的 Android。解决这些问题意味着需要进行额外的 API 迁移，因此还需要一个额外的稳定发布周期。出于谨慎考虑，并确保 Flutter 应用能在尽可能广泛的设备上运行，我们将推迟到今年晚些时候的稳定版发布时才将 Impeller 设为默认渲染器。

随着 Impeller 在 Android 上的预览在 3.24 稳定版本周期中持续进行，我们请求 Flutter 开发者升级到最新稳定版本，并提交在启用 Impeller 时遇到的任何不足之处的问题。在此阶段的反馈对于确保 Impeller 在 Android 上取得成功以及我们能够在今年晚些时候的发布中自信地将其作为默认渲染器至关重要。Android 硬件生态系统比 iOS 生态系统更加多样化。因此，关于 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 包开始使用 Flutter GPU。在未来几个月里，我们将看到更多功能和稳定性改进，随着像 flutter_scene 这样的高级渲染库的出现，这些高级功能的使用将变得更加简单。

要深入了解 Flutter GPU 以及了解如何在项目中利用它，请查看详细的 Flutter GPU 博客文章。无论是创建游戏还是复杂的图形，Flutter 的新 GPU 功能都使其成为您产品的一个强大选择。

网页

多视图嵌入

现在，Flutter 网页应用可以利用多视图嵌入功能，允许开发人员将内容同时渲染到多个 HTML 元素中。此功能被称为“嵌入模式”或“多视图”，为将 Flutter 视图集成到现有网页应用中提供了灵活性。

在多视图模式下，Flutter 网页应用在启动时不会立即呈现。相反，它会等待宿主应用使用 addView 方法添加第一个“视图”。宿主应用可以动态添加或移除这些视图，Flutter 会相应地调整其组件。

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

此功能特别适用于需要多个独立 Flutter 视图的复杂 Web 应用程序中集成 Flutter。它还支持为每个视图提供自定义初始化数据，从而实现个性化配置和交互体验。

要在您的 Flutter Web 应用程序中更深入地实现多视图嵌入，请查阅详细文档。

货币化

视频广告变现支持

我们已发布一个新的交互式多媒体广告（IMA）插件，以支持在 Flutter 移动应用上进行视频广告变现。新的 IMA 插件为 Flutter 应用提供了额外的广告变现机会，这建立在主要支持展示广告格式的现有 Google 移动广告（GMA）插件的基础上。

视频流中的视频广告通常在视频播放前（前置广告）、播放中（中置广告）或播放后（后置广告）在视频播放器中向用户展示。一些视频流中的视频广告也可以被跳过。

img

Flutter IMA 好处：

  • 无缝变现 Flutter 应用中的视频播放器内容。例如，当应用用户点击播放视频内容时，现在可以使用 Flutter IMA 插件先向用户展示 15 秒的广告，然后再开始播放视频内容。
  • 利用原生 IMA SDK 的相同优势，包括访问优质的 Google 广告需求和符合行业标准（如 IAB VAST）。

当前的初始发布版本支持在 Android 和 iOS 平台上播放前置视频广告。对中场广告的支持将很快提供。我们鼓励您开始在 Flutter 应用的视频内容上探索新的 IMA 插件。如果您在 GitHub 上有任何问题或疑虑，请告诉我们。

资源：插件指南，示例应用，Git 仓库

iOS

Swift Package Manager 初始支持

今天，Flutter 使用 CocoaPods 来管理原生 iOS 或 macOS 依赖项。

Flutter 3.24 添加了对 Swift Package Manager 的早期支持。这带来了多个好处，包括：

  1. 访问 Swift 包生态系统。Flutter 插件将能够利用不断发展的 Swift 包生态系统！
  2. 简化了 Flutter 的安装。Swift Package Manager 已捆绑在 Xcode 中。将来，您将无需安装 Ruby 和 CocoaPods 即可为 Apple 的平台使用 Flutter。

我们鼓励插件作者尝试为您的插件添加对 Swift Package Manager 的支持，并提供您使用体验的反馈。

如果你对 Flutter 支持 Swift Package Manager 有反馈，请提交一个问题。

生态系统

共享首选项插件更新

我们已向 shared_preferences 插件添加了两个新 API，SharedPreferencesAsync 和 SharedPreferencesWithCache。最大的更改是 Android 实现现在使用 Preferences DataStore 而不是 Shared Preferences。

SharedPreferencesAsync 允许用户直接调用平台以获取设备上保存的最新首选项，代价是采用异步方式，相比使用缓存版本稍慢。这对于可能被其他系统或隔离环境更新的首选项非常有用，因为这些情况会使缓存过时。

SharedPreferencesWithCache 是基于 SharedPreferencesAsync 构建的，允许用户同步访问本地缓存的首选项副本。这类似于旧版 API，但现在可以使用不同的参数多次实例化。

这些新的 API 旨在将来替换当前的 SharedPreferences API。但是，这是生态系统中最常使用的插件之一，我们知道生态系统需要时间来切换到新的 API。

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

img

作为 Fluttercon Europe 2024 的一部分，我们举办了首次线下 Flutter 和 Dart 包生态系统峰会。这继我们在 2023 年 8 月举办的首次虚拟峰会之后。在这里查看讨论会议的总结。

我们很高兴地宣布，下一届峰会将于 2024 年 9 月 20 日在美国纽约市的 Fluttercon USA 举行！如果您是组件作者或贡献者，并且将参加 2024 年的 Fluttercon USA，请注册以预留您在峰会上的席位。

峰会聚集了软件包作者和维护者，以无议程会议风格的形式讨论了以下主题：

  • 第 1 节 — 本机互操作的过去、现在和未来
  • 第 2 节 — 可持续的包维护模型
  • 第 3 节 — 解决包生态系统碎片化问题

我们认为峰会是社区内开展公开讨论的宝贵平台，特别是在更广泛的 Flutter 和 Dart 活动中，有助于提出关键挑战并集思广益解决方案。我们期待未来能与社区合作举办更多这样的峰会。

开发工具和集成开发环境

此发布包括对 Flutter DevTools 工具套件的一些令人兴奋的改进。

如果你曾经怀疑你的 Flutter 应用是否构建了比预期更多的组件，开发者工具中的性能工具有一个新功能可以帮助你解决这个问题。使用新的重建统计功能，你可以捕获关于应用中或甚至特定的 Flutter 帧中构建了多少次组件的信息。

img

DevTools 性能工具跟踪重建统计信息的截图。

我们对网络剖析器和 Flutter 深度链接工具等工具进行了完善和关键性 bug 修复，并进行了一些通用改进，以便在您从 IDE 使用 DevTools 时为您提供更好的体验。说到 IDE，你知道可以直接在 IDE 中使用所有 DevTools 工具吗？

img

DevTools 界面在 VS Code 窗口内打开。

img

DevTools 页面在 Android Studio 工具窗口内打开。

此发布包括对 VS Code 中 Flutter 侧边栏的改进，以便让您更轻松地访问所需的工具。请升级到最新版本的 VS Code 以及 Flutter 和 Dart 插件以使用改进后的侧边栏。

img

Flutter 侧边栏具有自适应性，并且会根据您的工作空间进行缩放以适应

此发布还对 DevTools 扩展框架进行了一些重大改进。现在，您可以在调试 Dart 或 Flutter 测试时使用 DevTools 扩展（由您的包依赖项提供的工具），甚至在您未调试任何内容、仅在 IDE 中编写代码时也可以使用。因此，如果您希望在这些用户旅程中使用某个工具（或构建一个！），现在就可以实现了。

要了解 Flutter 3.24 中包含的所有更新，请查看 DevTools 2.35.0、2.36.0 和 2.37.2 的发行说明。

破坏性变更和废弃功能

此版本中的重大变更包括对 Navigator 的页面 API 进行了更改，PopScope 中的泛型类型，Flutter Web 的默认渲染器以及引入了一些新的废弃项。请参阅重大变更页面上的完整迁移指南列表。

一如既往，衷心感谢社区为提供测试所做的贡献——这些测试帮助我们发现了这些破坏性变更。要了解更多信息，请查阅 Flutter 的破坏性变更政策。

结束语

Flutter 的成功核心在于您——我们了不起的社区。这次发布离不开您无数的贡献和坚定不移的热情。从心底里，向您表示感谢。

要深入了解此版本取得的成就，我们邀请您查看 Flutter 3.24 的发布说明和变更日志，以获取新增功能的综合列表。

Flutter 3.24 与 Dart 3.5 现已发布到稳定渠道。使用最新版本的 Flutter 非常简单，只需运行 flutter upgrade。我们迫不及待地想看到你的作品！

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

flutter 学习路径

© 猫哥 ducafecat.com

end