Flutter和桌面應(yīng)用的最新進(jìn)展
眾所周知，在開發(fā) Flutter 時，我們希望通過單一代碼庫支持 Flutter 在各類設(shè)備 (包括 iOS、Android、Windows、Linux、macOS 和 Web) 上的應(yīng)用，并實現(xiàn)原生編譯和游戲級別的視覺效果。Flutter 也已經(jīng)在 Google 內(nèi)部廣泛用于 Assistant、Stadia、Cloud Search 以及 Blogger 等項目。在 Google 之外，字節(jié)跳動、Grab、Nubank 以及 MGM Resorts 等公司也都已采用 Flutter，并通過 Flutter 提升了生產(chǎn)力和靈活性。
很多人都想了解 Flutter 在桌面操作系統(tǒng) (包括 Windows、macOS 和 Linux) 上的進(jìn)展: 據(jù)調(diào)查和 GitHub 數(shù)據(jù)顯示，F(xiàn)lutter 的桌面支持一直是最受期待的新功能之一。未來數(shù)周內(nèi)，我們將為大家?guī)砀噙@方面的進(jìn)展；同時，我們認(rèn)為有必要先展示來自各個產(chǎn)品功能團隊的成果 (這些成果最終會整合進(jìn)完整的項目中)，并搜集大家的反饋。雖然桌面支持目前已推出技術(shù)預(yù)覽版本，但我們?nèi)匀挥写罅抗ぷ餍枰瓿伞?/p>
發(fā)布模式
繼 macOS 之后，我們還為 Flutter 增加了 Windows 和 Linux 系統(tǒng)的 Profile Mode (性能模式) 和 Release Mode (發(fā)布模式) 。例如，如果您運行的是最新版 Flutter，現(xiàn)在可以使用 flutter build windows 命令，將 Flutter 應(yīng)用編譯為 Windows 可執(zhí)行文件。此操作使用我們在生產(chǎn)環(huán)境中的 AOT 編譯器來創(chuàng)建原生 x64 機器代碼，而這些代碼可分發(fā)至那些未安裝 Flutter 的設(shè)備上。
- Windows 發(fā)布模式
https://github.com/flutter/flutter/issues/38477
- Linux 發(fā)布模式
https://github.com/flutter/flutter/issues/38478
- AOT 編輯器
https://en.wikipedia.org/wiki/Ahead-of-time_compilation
桌面級體驗
無論您要構(gòu)建的是獨立可執(zhí)行文件還是 Web 應(yīng)用，桌面級體驗都有其獨特的屬性: 桌面窗口通常采用橫屏模式并可以調(diào)整大小、輸入通常由物理鍵盤和鼠標(biāo)完成，而不是通過屏幕鍵盤和觸摸操作，同時，控件也是基于不同的屏幕內(nèi)容密度進(jìn)行的優(yōu)化。
在框架層面，我們對 Flutter 進(jìn)行了多項變更以支持桌面級體驗。
- 在最新版本 Flutter 中創(chuàng)建新項目時，您會看到默認(rèn)模板包含了對 visualDensity 屬性的引用，該屬性允許控件根據(jù)目標(biāo)平臺調(diào)整其密度，從而在桌面平臺上實現(xiàn)更緊湊的間距。其中一個例子就是 TextField: 它可根據(jù)指定的密度提供緊湊 (compact)、舒適 (compact)、標(biāo)準(zhǔn) (standard) 三種間距。
- 我們優(yōu)化了對鼠標(biāo)和鍵盤輸入的支持，其中包括 Windows 上的原始鍵代碼、鼠標(biāo)右鍵操作、光標(biāo)更改和滾輪支持。
- 您現(xiàn)在可以 (通過 Platform 類) 查詢特定平臺，Windows、macOS 和 Linux 平臺均可提供恰當(dāng)?shù)牟樵兘Y(jié)果。
- 我們在最新版本中添加了一個 NavigationRail widget，該 widget 專為在桌面設(shè)備和平板電腦上打造桌面級體驗而設(shè)計。
- visualDensity
https://api.flutter-io.cn/flutter/material/ThemeData/visualDensity.html
- 桌面端需要更高的屏幕內(nèi)容密度
https://github.com/flutter/flutter/issues/43350
- TextField
https://api.flutter-io.cn/flutter/material/TextField-class.html
- 為 TextField 實現(xiàn) visualDensity
https://github.com/flutter/flutter/pull/51438
- 在 Windows 上實現(xiàn)鍵盤映射
https://github.com/flutter/flutter/issues/52264
支持光標(biāo)更改
https://github.com/google/flutter-desktop-embedding/issues/376
- NavigationRail widget
https://api.flutter-io.cn/flutter/material/NavigationRail-class.html
外部函數(shù)接口
Dart 團隊一直在努力完善外部函數(shù)接口 (Foreign Function Interface, FFI) ，以加速平臺集成的進(jìn)程。對于基于 C 語言的 API，dart:ffi 庫提供了一種直接綁定到原生代碼的機制；Dart 運行時則提供了在 Dart 對象支持的堆上分配內(nèi)存并調(diào)用動態(tài)鏈接庫的功能。
- 通過 dart:ffi 實現(xiàn) C 語言互操作
https://dart.cn/guides/libraries/c-interop
以下代碼片段為 Windows 系統(tǒng)環(huán)境中的一個簡單示例，該示例完全使用 Dart 代碼來調(diào)用傳統(tǒng)的 Win32 MessageBox() API:
- typedef MessageBoxNative = Int32 Function(
- IntPtr hWnd, Pointer<Utf16> lpText, Pointer<Utf16> lpCaption, Int32 uType);
- typedef MessageBoxDart = int Function(
- int hWnd, Pointer<Utf16> lpText, Pointer<Utf16> lpCaption, int uType);
- final user32 = DynamicLibrary.open('user32.dll');
- final win32MessageBox =
- user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');
- void showMessageBox(String message, String caption) => win32MessageBox(
- 0, // No owner window
- Utf16.toUtf16(message), // Message
- Utf16.toUtf16(caption), // Window title
- 0 // OK button only
- );
- …
- showMessageBox('Test Message', 'Window Caption'); // call just like any other Dart function
- 完整示例
https://gist.github.com/timsneath/181092c75864001ca37b1b1495b9b396
在上例中，我們通過兩個 typedef 分別體現(xiàn)了方法的原生和 Dart 版本形式。完成這些定義后，我們便可通過 lookupFunction() 方法加載 Windows 動態(tài)鏈接庫 (DLL)，lookupFunction() 負(fù)責(zé)將方法簽名映射到底層的原生入口，DLL 則負(fù)責(zé)提供方法的實現(xiàn)。最后，我們可以選擇添加一個簡單的慣用包裝器，使其便于從其他 Dart 代碼進(jìn)行訪問，運行結(jié)果如下:
△ 使用 Win32 MessageBox API 的 Windows 簡單示例應(yīng)用
當(dāng)然，您不必親自完成這項工作: 有人很可能已經(jīng)處理好了您要使用的 API。您可以閱讀我們的官方文檔，詳細(xì)了解如何在 Flutter 中使用 FFI。
- 訪問常用 Win32 API 的 Dart 庫
https://pub.flutter-io.cn/packages/win32
- 官方文檔: 使用 dart:ffi 調(diào)用原生代碼
https://flutter.cn/docs/development/platform-integration/c-interop
更新插件模型
從設(shè)計上說，F(xiàn)lutter 本身的核心很小。Flutter 并沒有在框架中提供海量內(nèi)容，而是通過插件和 package (無論是直接來自 Flutter 團隊還是來自更廣泛的生態(tài)系統(tǒng)中的貢獻(xiàn)者) 來實現(xiàn)與底層操作系統(tǒng)的集成。
但是，隨著 Flutter 對移動設(shè)備、Web 和桌面端的支持日益增多，為每個目標(biāo)平臺開發(fā)插件也變得越來越具有挑戰(zhàn)性。更可能出現(xiàn)的情況是: 一個插件需要多個掌握各自平臺專業(yè)知識的作者通力合作，才能完成開發(fā)。
一個可行的做法是，在核心插件中定義出通用接口，并在各個平臺上獨立完成具體的實現(xiàn)。因此，正如近期一篇關(guān)于現(xiàn)代插件開發(fā)的博文所述，我們最近對插件的架構(gòu)進(jìn)行了調(diào)整，使多個作者能夠更加輕松地合作完成各個平臺的開發(fā)?；谀壳暗倪M(jìn)展，插件現(xiàn)在可以明確地聲明其所支持的具體平臺。
- 博文: 現(xiàn)代 Flutter 插件開發(fā)
https://medium.com/flutter/modern-flutter-plugin-development-4c3ee015cf5a
- 指定插件所支持的平臺
https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin-platforms
我們已經(jīng)開始使用此模型來構(gòu)建一些核心插件，您也可以在 flutter/plugins repo 中找到一些基于這個聯(lián)合開發(fā)模型的早期示例。
- flutter/plugins repo
https://github.com/flutter/plugins/tree/master/packages/path_provider
請注意，Windows 和 Linux 插件 API 仍在開發(fā)之中，因此，雖然我們鼓勵大家多多探索，但目前尚未準(zhǔn)備好用于通用生產(chǎn)環(huán)境。我們也致力于在 pub.dev 上添加桌面平臺標(biāo)簽。
在 Windows 上運行: Win32 和 UWP
在 Windows 上進(jìn)行開發(fā)有一個很有趣的點在于，我們會試驗各種架構(gòu)方法。在任何平臺上，F(xiàn)lutter 應(yīng)用其實都是內(nèi)嵌于一個很小的容器應(yīng)用 (即 "embedder") 中的，這種做法類似 Unity 等游戲引擎。這種特定于平臺的容器應(yīng)用負(fù)責(zé)提供入口，與底層操作系統(tǒng)進(jìn)行協(xié)調(diào)以使用表面渲染、無障礙功能和輸入等服務(wù)，并管理消息事件循環(huán)。
Windows 提供了兩種不同的方法來創(chuàng)建這個容器應(yīng)用。第一個是使用成熟的 Win32 編程模型來創(chuàng)建 Flutter 內(nèi)容的入口；這為 Windows 7 等平臺提供了最大的向后兼容性，同時能構(gòu)建出符合諸多開發(fā)者預(yù)期的標(biāo)準(zhǔn) EXE 文件。第二個則是現(xiàn)代 UWP 應(yīng)用模型，推薦在 Windows 10 上使用。這種方法擁有更廣闊的想象空間，比如能夠幫助開發(fā)者將 Flutter 支持?jǐn)U展至 Xbox 等設(shè)備或即將推出的 Windows 10X 操作系統(tǒng)。
- Windows 10X
https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools
我們一直與多位社區(qū)貢獻(xiàn)者一起探討本文所述的不同解決方案。同時我們很期待與微軟緊密合作，共同完成高質(zhì)量的解決方案。Surface 系列設(shè)備正不斷擴展，現(xiàn)在其產(chǎn)品已涵蓋 Android 和 Windows。我們認(rèn)為 Flutter 可為微軟提供非常有吸引力的平臺，橫跨其全部產(chǎn)品陣容并提供卓越的原生體驗。
盡情探索桌面體驗
桌面體驗?zāi)壳叭蕴幱诩夹g(shù)預(yù)覽版狀態(tài)，而 API 和工具尚不穩(wěn)定。在將桌面支持升級到穩(wěn)定版本之前，我們?nèi)詫⒊掷m(xù)跟進(jìn)大量需要完成的必要工作，包括改進(jìn)無障礙功能和本地化支持。
如果您想要試用，則需要使用開發(fā)版本。Windows 和 Linux 支持目前僅在 master 渠道上可用，我們也在這個渠道中積極進(jìn)行著 Flutter 的開發(fā)。macOS 在 dev 渠道上可用，雖然穩(wěn)定性較好，但不建議用于生產(chǎn)環(huán)境。您可以在 Flutter master 渠道或 dev 渠道之間進(jìn)行切換，然后使用以下任一命令來為您使用的平臺提供支持:
- C:\flutter> flutter config --enable-windows-desktop
- $ flutter config --enable-macos-desktop
- $ flutter config --enable-linux-desktop
一些積極探索的開發(fā)者已經(jīng) "嘗鮮"，在桌面環(huán)境中利用 Flutter 創(chuàng)建應(yīng)用。我們見證的首批 Flutter macOS 桌面應(yīng)用便包括 Sharezone，這是一款針對德國教育市場的學(xué)生管理應(yīng)用，最初創(chuàng)建的是移動應(yīng)用版本，但最近增加了網(wǎng)頁和桌面版本。
△ Sharezone Schulplan: 一款面向?qū)W生、教育工作者和家長的應(yīng)用，用于跟蹤家庭作業(yè)、學(xué)習(xí)小組和課程表等情況
- Sharezone
在接下來的數(shù)周里，我們將分享更多關(guān)于桌面支持的信息；同時，我們也期待著聽到您的反饋。如果您是插件作者，我們建議您開始評估將自己的插件適配至即將到來的這些桌面平臺所需要的開發(fā)工作；如果您已發(fā)布應(yīng)用，不妨嘗試將應(yīng)用作為桌面應(yīng)用運行，并告訴我們您的運行情況。
