本文首發(fā)自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎關(guān)注"慕課網(wǎng)"！

作者：CrazeCodeBoy|慕課網(wǎng)講師

新年伊始，由 Flutter 3.7 正式版來(lái)「打頭陣」！我們與整個(gè) Flutter 社區(qū)們繼續(xù)在 Flutter 3.7 中優(yōu)化了框架，包括創(chuàng)建自定義菜單欄和層疊式菜單、更好的國(guó)際化工具支持、新的調(diào)試工具以及其他功能和特性等。

新的穩(wěn)定版里，我們?cè)诔掷m(xù)改進(jìn)一些特性，例如全局文本選擇、Impeller 渲染速度、DevTools 以及一直以來(lái)都在優(yōu)化的性能。讓我們一起來(lái)快速探索 Flutter 3.7 的新特性吧！

增強(qiáng)對(duì) Material 3 的支持

在 Flutter 3.7 中，以下的 widget 已經(jīng)進(jìn)行了 Material 3 的適配：

• Badge
• BottomAppBar
• Filled and Filled Tonal buttons
• SegmentedButton
• Checkbox
• Divider
• Menus
• DropdownMenu
• Drawer and NavigationDrawer
• ProgressIndicator
• Radio buttons
• Slider
• SnackBar
• TabBar
• TextFields and InputDecorator
• Banner

你可以直接在應(yīng)用中的 ThemeData 里設(shè)置 useMaterial3 來(lái)啟用 Material 3。只有在完整的顏色方案下才能展現(xiàn)出 Material 3 最完整的細(xì)節(jié)，你可以使用新的 Material 主題構(gòu)建器 生成你的主題配置，也可以通過(guò) Flutter ThemeData 構(gòu)造中的 colorSchemeSeed (顏色種子) 自動(dòng)生成一整套的主題：

MaterialApp(

theme: ThemeData(

useMaterial3: true,

colorSchemeSeed: Colors.green,

),

// …

);

若想了解 Flutter 在 Material 3 上的支持進(jìn)度，你可以在 GitHub 上查看 flutter #91605 號(hào)議題。

你也可以嘗試 Material 3 示例，其中展示了所有主題的特性。

菜單欄和級(jí)聯(lián)菜單

Flutter 現(xiàn)在可以創(chuàng)建菜單欄和級(jí)聯(lián)菜單了。

在 macOS 上，你可以使用 PlatformMenuBar widget 來(lái)創(chuàng)建菜單欄，你的菜單欄將由 macOS 系統(tǒng)來(lái)渲染，而不是使用 Flutter。

此外，對(duì)于所有其他的平臺(tái)，你可以定義一個(gè) Material Design 菜單，它提供了級(jí)聯(lián)菜單欄 (MenuBar)，或者使用由 UI 界面元素觸發(fā)的 (MenuAnchor) 來(lái)創(chuàng)建一個(gè)級(jí)聯(lián)菜單。這些菜單都是完全可自定義的，其中的菜單項(xiàng)可以是自定義的 widget，也可以使用新的菜單項(xiàng) widget: (MenuItemButton 和 SubmenuButton)。

Impeller 預(yù)覽版

Flutter 團(tuán)隊(duì)很高興能 在穩(wěn)定版渠道上 為大家?guī)?lái) iOS 平臺(tái)的 Impeller 渲染引擎 預(yù)覽。我們認(rèn)為 Impeller 的性能已經(jīng)達(dá)到甚至超越了大部分現(xiàn)有應(yīng)用上的 Skia 渲染。在圖像保真方面，Impeller 也已覆蓋了大部分除極端條件以外的應(yīng)用場(chǎng)景。我們希望能夠在之后的穩(wěn)定版本中將 Impeller 作為 iOS 平臺(tái)的默認(rèn)渲染引擎，如果你在體驗(yàn)時(shí)有任何問(wèn)題，請(qǐng)繼續(xù) 在 GitHub 上提交 Impeller 的相關(guān)反饋。

盡管我們對(duì) iOS 上 Impeller 滿足現(xiàn)有應(yīng)用的渲染需求有足夠的自信，但仍然有部分 API 需要進(jìn)行補(bǔ)充。你可以在 Flutter wiki 文檔 上看到目前 Impeller 的進(jìn)度。用戶及開(kāi)發(fā)者在使用時(shí)可能會(huì)注意到 Impeller 與 Skia 之間的渲染細(xì)節(jié)區(qū)別，這些區(qū)別可能是 BUG，當(dāng)你遇到時(shí)請(qǐng)記得 提交反饋 幫助我們定位并修復(fù)它。

Impeller 的進(jìn)展飛速離不開(kāi)社區(qū)貢獻(xiàn)者的支持。尤其是 ColdPaleLight、guoguo338、JsouLiang 以及 magicianA 這些開(kāi)發(fā)者，在此次發(fā)布版本的 Impeller 的 291 次提交中有 31 次 (>12%) 是他們提交的。非常感謝他們的幫助！

我們也在繼續(xù)推進(jìn) Vulkan 作為 Impeller 的渲染后端 (在一些老的設(shè)備上會(huì)降級(jí)到 OpenGL)，但是 Android Impeller 尚未準(zhǔn)備好進(jìn)行公開(kāi)預(yù)覽。我們會(huì)在未來(lái)的發(fā)布中分享更多正在積極進(jìn)行的 Impeller 開(kāi)發(fā)進(jìn)程，包括桌面和 Web 平臺(tái)的支持。

若你感興趣，可以關(guān)注 GitHub 上的 Impeller 項(xiàng)目板 來(lái)跟進(jìn)開(kāi)發(fā)進(jìn)度。

iOS 發(fā)布校驗(yàn)

當(dāng)你在構(gòu)建一個(gè)發(fā)布版本的 iOS 應(yīng)用時(shí)，F(xiàn)lutter 會(huì)為你提供 項(xiàng)目設(shè)置檢查清單 來(lái)確保你的應(yīng)用已經(jīng)準(zhǔn)備好發(fā)布到 App Store。

現(xiàn)在 flutter build ipa 命令會(huì)校驗(yàn)項(xiàng)目的一部分設(shè)置，并且在清單中告知你在發(fā)布前進(jìn)行更改。

開(kāi)發(fā)者工具更新

在本次發(fā)布中，開(kāi)發(fā)工具也帶來(lái)了新的特性和體驗(yàn)優(yōu)化。DevTools 的內(nèi)存調(diào)試工具已經(jīng)完成了一輪全面的調(diào)整。我們帶來(lái)了三個(gè)新的選項(xiàng)卡：Profile、Trace 和 Diff，它們包含了先前的所有內(nèi)存調(diào)試功能，也添加了更多利于調(diào)試的操作?，F(xiàn)在你可以按照類(lèi)或者內(nèi)存類(lèi)型對(duì)當(dāng)前的內(nèi)存分配進(jìn)行分析，可以在運(yùn)行時(shí)分析哪些代碼調(diào)用了哪些部分的內(nèi)存，也可以對(duì)比兩個(gè)不同時(shí)間點(diǎn)的內(nèi)存快照之間的差異來(lái)了解內(nèi)存使用的細(xì)節(jié)。

以上的這些內(nèi)存特性已經(jīng)在 文檔 中進(jìn)行了介紹，若你感興趣可以前往了解更多細(xì)節(jié)。

性能頁(yè)面也有一些值得注意的新功能，該頁(yè)面現(xiàn)在在頂部新增了 Frame Analysis (幀分析) 選項(xiàng)卡，它能夠提供在 Flutter 中詳細(xì)追蹤大量消耗的某些幀和操作的一些建議。

除了以上的新功能，本次更新還有其他的問(wèn)題修復(fù)和優(yōu)化改進(jìn)，包括查看器 (Inspector)、網(wǎng)絡(luò)記錄器的 CPU 記錄器的問(wèn)題修復(fù)。你可以查看下面的 DevTools 更新日志了解更多細(xì)節(jié)。

• Flutter DevTools 2.17.0 發(fā)行注記
• Flutter DevTools 2.18.0 發(fā)行注記
• Flutter DevTools 2.19.0 發(fā)行注記
• Flutter DevTools 2.20.0 發(fā)行注記

自定義上下文菜單

從新版本開(kāi)始，你可以在 Flutter 應(yīng)用的任意位置創(chuàng)建自定義的上下文菜單，也可以自定義內(nèi)置的上下文菜單。

舉例來(lái)說(shuō)，你可以在用戶選中郵件地址時(shí)，為文本框默認(rèn)的選擇菜單添加「發(fā)送郵件」的按鈕 (代碼地址)。contextMenuBuilder 參數(shù)也已經(jīng)添加到現(xiàn)有包含上下文菜單的 widget 中。你可以在 contextMenuBuilder 中返回任何你想返回的 widget，也包括平臺(tái)自適應(yīng)的上下文菜單。

這一新特性也可以用于文本選擇以外的場(chǎng)景。例如，你可以為一個(gè) Image widget 的右鍵和長(zhǎng)按操作添加「保存」按鈕 (代碼地址)。你也可以使用 ContextMenuController 在應(yīng)用內(nèi)的任意位置展示平臺(tái)默認(rèn)或者自定義的上下文菜單。

若想查看完整的示例，前往 Flutter 示例代碼倉(cāng)庫(kù) 了解更多。

CupertinoListSection 和 CupertinoListTile widget

Cupertino 系列 widget 迎來(lái)了兩位新成員： CupertinoListSection 和CupertinoListTile，可用于展示 iOS 風(fēng)格的滾動(dòng)列表內(nèi)容。它們是 Cupertino 版本的 ListView 和 ListTile。

滑動(dòng)優(yōu)化

此次版本發(fā)布中也包含了眾多 滑動(dòng)相關(guān)的問(wèn)題 修復(fù)，包括觸控板的交互優(yōu)化以及在滑動(dòng)組件中文本選擇時(shí)的行為。

值得注意的是，macOS 的應(yīng)用現(xiàn)在可以通過(guò) 新物理滑動(dòng)特性 來(lái)體驗(yàn)與其有更高匹配度的滑動(dòng)體驗(yàn)。

新的 AnimatedGrid 和 SliverAnimatedGrid 可以用于為新增和移除的內(nèi)容展示動(dòng)畫(huà)。

最后，我們 修復(fù)了 自 Flutter 遷移至健全的空安全以來(lái)的一個(gè)問(wèn)題，該問(wèn)題影響了所有包含 itemBuilder 參數(shù)的滑動(dòng) widget (例如 ListView)。在遷移至空安全時(shí)，itemBuilder 的類(lèi)型遷移至了 IndexedWidgetBuilder，即不允許返回 null，而在以前 null 可以用來(lái)代表列表已經(jīng)到了底部等。該參數(shù)現(xiàn)已修改為 NullableIndexedWidgetBuilder。感謝 @rrousselGit 發(fā)現(xiàn)并修復(fù)了這個(gè)問(wèn)題！

國(guó)際化工具和文檔

Flutter 對(duì)國(guó)際化的支持已經(jīng)煥然一新！我們對(duì) gen-l10n 進(jìn)行了重寫(xiě)以支持下述特性：

• 描述性的語(yǔ)法錯(cuò)誤
• 嵌套或多個(gè)復(fù)數(shù)、選擇和占位的消息內(nèi)容

更多內(nèi)容可以了解已經(jīng)更新的 Flutter 應(yīng)用里的國(guó)際化 文檔。

全局的選擇優(yōu)化

SelectionArea 現(xiàn)在已支持鍵盤(pán)操作。你可以通過(guò)鍵盤(pán)快捷鍵 Shift+→ 等快捷鍵進(jìn)行選擇。

后臺(tái) isolate

現(xiàn)在 平臺(tái)通道 可以在 任意 isolate 中進(jìn)行調(diào)用。先前平臺(tái)通道只能在主 isolate 中進(jìn)行調(diào)用。優(yōu)化后會(huì)讓插件和混合開(kāi)發(fā)調(diào)用 isolate 和宿主平臺(tái)代碼更加簡(jiǎn)單。更多內(nèi)容可以閱讀 撰寫(xiě)平臺(tái)代碼 文檔以及 介紹后臺(tái) isolate 通道 文章。

文本放大鏡

在 Android 和 iOS 上進(jìn)行文本選擇時(shí)會(huì)出現(xiàn)的放大鏡現(xiàn)在也會(huì)在 Flutter 中出現(xiàn)了。它已經(jīng)添加至了所有的文本選擇，但是你也可以通過(guò) magnifierConfiguration 禁用或者自定義。

插件代碼遷移至 Swift

Apple 整將它們的代碼遷移至 Swift，我們也希望能為開(kāi)發(fā)者構(gòu)建 Swift 插件的示例和指導(dǎo)。quick_actions 已經(jīng)從 Objective-C 遷移至了 Swift，也可以作為 Swift 插件的最佳實(shí)踐。如果你對(duì)幫助 Flutter 遷移第一方插件至 Swift 感興趣，請(qǐng)參考 wiki 中的 Swift 遷移部分。

給 iOS 開(kāi)發(fā)者準(zhǔn)備的資源

我們新發(fā)布了一系列為 iOS 開(kāi)發(fā)者準(zhǔn)備的資源，包括：

• 給 SwiftUI 開(kāi)發(fā)者的 Flutter 指南
• 給 Swift 開(kāi)發(fā)者的 Dart 指南
• 給 Swift 開(kāi)發(fā)者的 Flutter 并發(fā)開(kāi)發(fā)指南
• 將 Flutter 添加到現(xiàn)有的 SwiftUI 應(yīng)用中
• 為 Flutter 創(chuàng)建多渠道 (針對(duì) Android 和 iOS)

廢棄 Bitcode

從 Xcode 14 開(kāi)始，watchOS 和 tvOS 的應(yīng)用不再需要 bitcode，并且 App Store 也不再接收帶 bitcode 的應(yīng)用提交。因此，F(xiàn)lutter 也移除了 bitcode 的支持。

Bitcode 在 Flutter 應(yīng)用中默認(rèn)是關(guān)閉的，所以這也不應(yīng)該會(huì)影響太多開(kāi)發(fā)者的項(xiàng)目。但是，如果你曾經(jīng)為你的項(xiàng)目手動(dòng)啟用過(guò) bitcode，請(qǐng)盡快在升級(jí)到 Xcode 14 后關(guān)閉 bitcode。你可以使用 Xcode 打開(kāi) ios/Runner.xcworkspace 找到 Enable Bitcode 設(shè)置為 No，混合開(kāi)發(fā)項(xiàng)目需要在宿主項(xiàng)目中禁用。

iOS 平臺(tái)視圖應(yīng)用 BackdropFilter

我們?yōu)?iOS 原生視圖添加了可以渲染高斯模糊的特性，現(xiàn)在嵌套在 BackdropFilter 中的 UiKitView 可以正確的渲染高斯模糊了。

你可以查看相應(yīng)的 設(shè)計(jì)文檔 了解更多。

內(nèi)存管理

此次發(fā)布的版本對(duì)內(nèi)存管理做了一些改進(jìn)，這些改進(jìn)的共同作用是減少由 GC 暫停引起的卡頓、減少由于分配速度和后臺(tái) GC 線程引起的 CPU 占用，并且降低內(nèi)存占用。

例如，我們擴(kuò)展了現(xiàn)有手動(dòng)釋放某些 dart:ui Dart 對(duì)象的本地資源的實(shí)踐。先前在 Dart VM 垃圾回收 Dart 對(duì)象前，本地資源都將被 Flutter 引擎持有。通過(guò)對(duì)用戶應(yīng)用程序和我們的 benchmarks 分析，我們認(rèn)為這種策略很多時(shí)候無(wú)法避免不合適的 GC 和過(guò)度使用內(nèi)存。因此在此次更新中 Flutter 引擎添加了 API ，用于顯式釋放由 Vertices、Paragraph 和 ImageShader 對(duì)象持有的本地資源。

在我們遷移到此 API 的 Flutter 框架的 benchmarks 中，將 90% 的幀構(gòu)建時(shí)間減少了 30% 以上，最終用戶將體驗(yàn)到更流暢的動(dòng)畫(huà)和更少的卡頓。

此外，F(xiàn)lutter 引擎 不再上報(bào) Dart VM 中的 GPU 圖像的大小。如上所述，當(dāng)這些圖像資源不再被需要時(shí)已由框架手動(dòng)釋放，如果這時(shí)繼續(xù)按照 GPU 內(nèi)存大小的 GC 策略上報(bào)至 Dart，會(huì)導(dǎo)致不必要的堆內(nèi)存壓力并進(jìn)一步觸發(fā)無(wú)效的 GC。類(lèi)似的方法同樣應(yīng)用到了 Flutter 引擎中，用于回收 dart:ui 原生對(duì)象的 隱式內(nèi)存占用。

在我們的測(cè)試中，此更改省去了 widget 創(chuàng)建 GPU 常駐圖像構(gòu)建幀時(shí)的同步 GC 工作。

本次版本發(fā)布中，F(xiàn)lutter 引擎在動(dòng)態(tài)更新應(yīng)用狀態(tài)至 Dart VM 方面有所進(jìn)步。具體來(lái)說(shuō)，F(xiàn)lutter 現(xiàn)在會(huì)使用 Dart VM 中 RAIL 風(fēng)格 的 API，讓 路由轉(zhuǎn)場(chǎng)時(shí)渲染延遲更低，即讓堆內(nèi)存在轉(zhuǎn)場(chǎng)時(shí)保持增長(zhǎng)而不是進(jìn)行 GC，避免造成動(dòng)畫(huà)的卡頓。目前這項(xiàng)改動(dòng)不會(huì)帶來(lái)太大的性能優(yōu)化，但未來(lái)我們會(huì)將這項(xiàng)改進(jìn)拓展到其他方法上，消除由 GC 帶來(lái)的卡頓影響。此外，我們還修復(fù)了向 Dart VM 報(bào)告 Flutter 引擎已經(jīng)閑置的 一處邏輯錯(cuò)誤，也減少了 GC 帶來(lái)的卡頓。最后，在 Flutter 視圖不再展示時(shí)，也會(huì) 通知 Dart VM 進(jìn)行處理，進(jìn)一步優(yōu)化了 Flutter 視圖未顯示時(shí)的內(nèi)存占用。

放棄對(duì) macOS 10.11 到 10.13 版本的支持

我們?cè)?[Flutter 3.3 發(fā)布的文章]中提到過(guò)，F(xiàn)lutter 將不再支持 macOS 的 10.11 和 10.12 版本，自上個(gè)版本發(fā)布以來(lái)，通過(guò)進(jìn)一步的 分析發(fā)現(xiàn)，放棄對(duì) macOS 10.13 的支持也不會(huì)造成太大影響，帶來(lái)的收效卻是可以幫助大幅簡(jiǎn)化代碼庫(kù)。這意味著，使用 Flutter 3.7 以及后續(xù)版本構(gòu)建的桌面端應(yīng)用程序?qū)⒉荒茉僭?macOS 10.11、10.12、10.13 版本中運(yùn)行，F(xiàn)lutter 對(duì) macOS 的最低10點(diǎn)要求版本提升至 macOS Mojave 10.14。

至此，F(xiàn)lutter 構(gòu)建的 iOS 和 macOS 應(yīng)用都已經(jīng)包含了 Metal 的支持，OpenGL 后端渲染引擎已經(jīng)從 iOS 和 macOS 嵌入器層被移除，移除后，壓縮后的 Flutter 引擎體積降低了大約 100KB。

將 toImageSync 新增至 dart:ui 中

本次版本發(fā)布，將 Picture.toImageSync 和 Scene.toImageSync 方法直接加入到了 dart:ui，類(lèi)似于 Picture.toImage 以及 Scene.toImage. 這樣的異步方法，Picture.toImageSync 會(huì)直接返回一個(gè) Picture 轉(zhuǎn) Image 的一個(gè)句柄，并在后臺(tái)異步對(duì) Image 進(jìn)行光柵化。

當(dāng) GPU context 可用時(shí)，圖像會(huì)在 GPU 中常駐，這意味著與 toImage 生成的圖像相比它的繪制速度會(huì)更快。(toImage 生成的圖像也可以實(shí)現(xiàn) GPU 常駐，但目前還未實(shí)現(xiàn))。

新的 toImageSync API 支持的例子：

• 快速捕捉一張昂貴的柵格化圖片，以便跨多幀重復(fù)使用。
• 應(yīng)用在圖片的多路過(guò)濾器上
• 應(yīng)用在自定義著色器上

一個(gè)例子是，F(xiàn)lutter 框架現(xiàn)已使用這個(gè) API 以?xún)?yōu)化 Android 上的頁(yè)面切換動(dòng)畫(huà)的性能，幾乎減少了幀光柵化一半的時(shí)間且減少了卡頓，而且在支持這些刷新率的機(jī)器上動(dòng)畫(huà)可以達(dá)到 90 / 120 FPS。

自定義著色器支持的改進(jìn)

本次發(fā)行版包含了許多關(guān)于 Flutter 對(duì)自定義著色器片段的優(yōu)化支持。Flutter SDK 現(xiàn)已內(nèi)置了一個(gè)著色器編譯器，能夠?qū)?pubspec.yaml 文件中列出的 GSGL 著色器編譯為目標(biāo)平臺(tái)的正確的平臺(tái)特定對(duì)應(yīng)的格式。此外，自定義著色器能夠在開(kāi)發(fā)階段方便的執(zhí)行 hot reload。自定義著色器目前已經(jīng)在 iOS 上對(duì) Skia 以及 Impeller 都支持了。

我們?yōu)樯鐓^(qū)中分享的樣例感到印象深刻，期待能夠未來(lái)能有更多關(guān)于 Flutter 中的自定義著色器的創(chuàng)意。

• https://twitter.com/reNotANumber/status/1599717360096620544
• https://twitter.com/reNotANumber/status/1599810391625719810
• https://twitter.com/wolfenrain/status/1600242975937687553
• https://twitter.com/iamjideguru/status/1598308434608283650
• https://twitter.com/rxlabz/status/1609975128758026247
• https://twitter.com/RealDevOwl/status/1528357506795421698
• https://twitter.com/TakRutvik/status/1601380047599808513
• https://twitter.com/wolfenrain/status/1600601043477401606

請(qǐng)參閱 文檔網(wǎng)站上的文檔 以及 pub.dev 上的

flutter_shaders package 了解更多。

字體資源支持熱重載

在過(guò)去，將新的字體資源加入到 pubspec.yaml 文件的時(shí)候會(huì)需要重新構(gòu)建應(yīng)用后才能查看，不像其他資源可以直接熱重載生效，現(xiàn)如今，字體清單文件的修改 (包括添加新字體) 后，也可以直接熱重載到應(yīng)用中立刻可見(jiàn)了。

減少 iOS 設(shè)備上動(dòng)畫(huà)效果的卡頓

有兩項(xiàng)重要的來(lái)自社區(qū)成員 luckysmg 的貢獻(xiàn)，幫助減少了 iOS 設(shè)備上動(dòng)畫(huà)效果的卡頓。特別是在 iOS 手勢(shì)交互期間在主線程上添加一個(gè)虛擬的 CADisplayLink 以強(qiáng)制設(shè)定最大刷新率。此外，鍵盤(pán)動(dòng)畫(huà)也通過(guò) CADisplayLink 設(shè)定了與 Flutter 引擎里 animator 相同的刷新率。由于新加入了這些變化，用戶可以在 120Hz 的 iOS 設(shè)備上感受到更一致和流暢的動(dòng)畫(huà)效果。

結(jié)語(yǔ)

還是那句話，如果沒(méi)有 Flutter 社區(qū)中優(yōu)秀、熱情貢獻(xiàn)者們，F(xiàn)lutter 不會(huì)像現(xiàn)在這樣優(yōu)秀，在我們未來(lái)持續(xù)進(jìn)行的這段旅程中，我們希望你可以知道，沒(méi)有你們，我們無(wú)法做出這樣的優(yōu)秀成績(jī)。感恩每一位貢獻(xiàn)者！

我們的發(fā)展勢(shì)頭依舊，請(qǐng)期待未來(lái)的更新！

歡迎關(guān)注「慕課網(wǎng)」官方帳號(hào)，我們會(huì)一直堅(jiān)持內(nèi)容原創(chuàng)，提供IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識(shí)，大家一起共同成長(zhǎng)吧！

本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請(qǐng)注明出處，謝謝合作