解讀 Flutter 全平臺開發的誤解與偏見

戀貓de小郭發表於2021-03-11
Flutter

Flutter 2.0 釋出之後，Web 版本進入了 stable 分支，Desktop 版本也可以在 stable 分支通過 snapshot beta 映象開始預覽使用，導致最近關於 “Flutter 制霸全平臺” 之類的話題又被炒作起來，所以本篇主要對這個話題做一次解答。

1、Flutter 制霸全平臺

谷歌官方在 Flutter 2.0 的釋出上說過：“每個應用程式都可以通過 Flutter 2 進行免升級，因為它們現在可以在不重寫的情況下擴充套件到 Desktop 和 Web ” 。

事實上 Flutter 在 Android 和 iOS 平臺上的相容和適配確實很不錯，但是對於 Web 和 Desktop 目前來說顯然不是如此，“不重寫下擴充套件”這話估計谷歌自己都不信。

首先 “不重寫的情況下擴充套件到 Desktop 和 Web” 就很不現實 ，為什麼呢我們後面分析，這裡先說下 Flutter 的核心設計，瞭解過 Flutter 實現原理的應該知道， Flutter 的核心設計是 ：

平臺只需要提供 Sufrace ，然後剩餘的控制元件和渲染邏輯都由 Engine 來完成，而 Engine 直接於 GPU 互動，控制元件也和所在平臺沒有關係，所以 Flutter 可以有不錯的效能和跨平臺能力。

1.1、 Web

但是 Flutter 在 Web 上卻並非完全如前面所述那樣，因為 Web 下的瀏覽器 JS/CSS/HTML 霸權是不可撼動的，所以 Flutter 一開始在 Web 上會通過 HtmlCanvas 來轉化為瀏覽器的原生標籤。

這有什麼問題？這就表示 Flutter 需要和 “Web 原生有不同程度的耦合關係”，從而造成了程式碼在不同平臺的表現形式和 API 的相容能力都會有所不同，而 Flutter 應對 Web 的這種情況，使用了大量的自定義標籤，從而導致在大小、效能和體驗上都還不是很好。

image.png

當然 Flutter 還提供了另外一種 Web 渲染能力，更接近 Mobile 和 Desktop 的 CanvasKit 渲染模式，CanvasKit 相當於是基於 WebGL 版本的 Skia 渲染，這種模式下效能肯定會更好，但是需要做的相容和適配工作量也更大。

flutter web 編譯是可以通過 --web-renderer 指定渲染模式，現在模式是 auto 模式，也就是在手機瀏覽器使用 HTML renderer， 在 PC 瀏覽器使用 CanvasKit renderer。

當然說那麼多我的意思並不是為了貶低 Web ，這裡只是想表達 Flutter Web 並不是也不能幹掉前端開發，更不足以挑戰 React、Vue 的地位，它更多的是 Flutter 的一種能力擴充：

Flutter 開發者恰好寫了一個 App 或者 Desktop 的頁面，那麼順手把它打包成 Web 用起來，雖然體驗不好但是又不是不能用的場景。

所以至少短時間內 Flutter Web 在前端領域就是“弟弟”，別說制霸了，能猥瑣發育就很難得了。

1.2、Desktop

在 PC 領域 Flutter 表現還是可以的，因為它和手機端具備類似的渲染邏輯，而對於 PC 端 Flutter 主要的考驗還是控制元件體驗和外掛支援的問題上。

因為不同於手機，桌面端大部分時候介面佈局和手機端本身就存在較大差異，甚至桌面端的介面通常是可大小調節，另外桌面端應用的輸入和控制元件焦點主要來源於滑鼠，所以迴歸到最前面的那段話“不重寫的情況下擴充套件到 Desktop 和 Web” 就很不現實。

那麼有沒有辦法讓介面同時適配 PC 和 Mobile 呢？還真有，比如 ResponsiveFramework 就是用於實現這種需求的，當然這種實現需要消耗效能和時間成本。

%E6%9C%AA%E5%91%BD%E5%90%8D.gif

另外 PC 和 Mobile 還是存在一些通用的場景，比如實現型別 2B 產品的像飛書系列的應用，在關於小程式的功能和那個，可以做到同一套邏輯在手機和 PC 端更有效率的同步釋出，同時還可能擁有不錯的效能。

最後 Flutter 對於 ReorderableListView 、TextField 和 TextFormField 等控制元件上也在 2.0 開始增加了增對桌面端的體驗，不過還是那句話，Flutter 在 PC 領域的路才剛剛開始，制霸是不可能制霸的，不過在 PC 端的未來確實會比 Web 更明朗。

經歷過多端開發的才明白一套程式碼在多端上通用的成本有多高，跨平臺能夠在 Android 和 iOS 上高效能低耦合的實現已經很難得了，如果想無縫擴充到 Web 和 Desktop 只會自己挖坑埋自己，所以部分邏輯全平臺，實際專案分平臺我覺得才是 Flutter 多平臺的未來。

相關文章