為什麼說Flutter是革命性的？

譯者丨覃雲

Flutter 是什麼？

Flutter 移動應用程序 SDK 是為開發人員提供一種創建快捷、美觀的應用程序的新方式，從而擺脫過去那種千篇一律的 app，嘗試過 Flutter 的人都會真的愛上它。

與任何新系統一樣，用戶想知道 Flutter 有什麼與眾不同之處，“Flutter 有什麼新的或者令人興奮的東西嗎？”，這是一個合理的問題，本文將從技術的角度回答 Flutter 有什麼東西讓人興奮，而且給出它為什麼讓人興奮的原因。

但首先，先講一小段歷史。

移動開發的簡史

移動開發是一個較新的領域，開發者們開始涉足移動開發時間尚不足十年，所以移動開發的工具仍然在發展當中，這並不奇怪。

OEM SDKs

蘋果的 iOS SDKs 發佈於 2008 年，谷歌的 Android 軟件開發工具包發佈於 2009 年，這兩種工具包基於不同的編程語言，分別是 Objective-C 和 Java。

通過這些 SDK，你的應用可以與系統通信，以創建 UI 組件或訪問系統相機。這些組件被渲染到手機屏幕，而相應的事件則被傳回給組件。這個架構足夠簡單，但你仍然不得不為每個平臺開發單獨的 App，因為這些系統組件都是不一樣的，更不用提開發語言的不同了。

WebView

第一個跨平臺的框架基於 JavaScript 和 WebView，例如 Titanium 和 一系列相關的框架：PhoneGap, Apache Cordova, Ionic 等，在蘋果發佈 iOS 之前，他們鼓勵第三方開發者為 iPhone 構建網頁應用程序，因此使用 Web 技術構建跨平臺應用程序是順理成章的一步。

你的應用程序可以創建 HTML 並將其顯示在平臺的 WebViews 上，請注意像 JavaScript 這樣的語言很難直接與本地代碼（例如服務）進行通信，因此他們會通過一個在 JavaScript 代碼和原生代碼的“橋樑”進行上下文切換，因為平臺服務通常不會經常被調用，所以這並不會導致太大的性能問題。

響應式視圖

像 ReactJS 或 其他 的響應式編程框架已經變得很流行了，主要是因為他們通過使用從響應式編程中借用的編程模式來簡化 Web 視圖的創建過程。2015 年， React Native 將響應式視圖的許多優勢帶給了移動應用程序。

React Native 是非常受歡迎的（這是它應得的），但是因為 JavaScript 訪問了原生 UI 組件，所以它也必須經過這些“橋接器”，界面上的 UI 控件通常被頻繁地訪問（在動畫、轉化或者用戶用手指“滑動”屏幕上的某些東西時，每秒被訪問高達 60 次），因此這很可能會導致性能問題。正如 關於 React Native 的一篇文章 所說：

這是理解 React Native 性能的其中一個關鍵，JS 代碼和原生代碼本身都是很快的，瓶頸經常發生在當我們視圖從一邊轉向另一邊時。未來構建高質量的應用程序時，我們必須將使用橋接的次數控制到最小。

Flutter

和 React Native 一樣，Flutter 也提供響應式的視圖，Flutter 採用不同的方法避免由 JavaScript 橋接器引起的性能問題，即用名為 Dart 的程序語言來編譯。Dart 是用預編譯的方式編譯多個平臺的原生代碼，這允許 Flutter 直接與平臺通信，而不需要通過執行上下文切換的 JavaScript 橋接器。編譯為原生代碼也可以加快應用程序的啟動時間。

實際上，Flutter 是唯一提供響應式視圖而不需要 JavaScript 橋接器的移動 SDK，這就足以讓 Fluttter 變得有趣而值得一試，但 Flutter 還有一些革命性的東西，即它是如何實現 UI 組件的？

組件（Widgets）

Widgets 是影響和控制應用程序的視圖和界面的元素，說這些組件是移動應用中最重要的部分之一，這並不誇張，事實上，UI 表現如何，可以成就或毀掉一款 App。

• Widgets 的外觀和給人的感覺是至關重要的，Widgets 需要看起來不錯，包 括各種屏幕的尺寸，也需要有自然的感覺。

• Widgets 必須快速執行：創建或擴展 UI 控件（實例化他們的 Widgets），將其放在屏幕上，渲染他們，或者（尤其是）將其動畫化。

• 對現代的應用程序來說，Widgets 應該是可擴展和可定製的，開發人員希望能夠添加討人喜歡的新的 UI 組件，並自定義所有 Widgets 以匹配各種品牌的應有程序。

Flutter 的系統架構包含大量賞心悅目、快速、可定製、可擴展的 Widgets。沒錯，Flutter 不需要使用系統 UI 組件（或 DOM WebViews），它自帶了 Widgets。

Flutter 將 UI 組件和渲染器從平臺移動到應用程序中，這使得它們可以自定義和可擴展。Flutter 唯一要求系統提供的是 canvas，以便定製的 UI 組件可以出現在設備的屏幕上，以及訪問事件（觸摸，定時器等）和服務（位置、相機等）。

Dart 程序（綠色）和執行數據編碼和解碼的原生平臺代碼（藍色，適用於 iOS 或 Android）之間仍然有一個接口，但這能比 JavaScript 橋接器快幾個數量級。

將 UI 組件和渲染器移動到應用程序中確實會影響應用程序的大小。Android 上的 Flutter 應用程序的的初始大小約為 6.7M，這與類似的工具構建的最小應用程序的大小相似，您可以決定 Flutter 的優勢是否值得權衡，因此本文的餘下部分將討論這些優勢。

佈局

Flutter 最大的改進之一就是它的佈局，佈局是基於一組規則（也稱約束）來決定 UI 組件的大小和位置。

傳統上，佈局使用大量可以應用於任何 UI 組件的規則。這些規則實現多種佈局方法，我們就以眾所周知的 CSS 佈局為例（儘管 Android 和 iOS 中的佈局基本相似）。CSS 具有適用於 HTML 元素（UI 組件）的屬性（規則）， CSS3 定義了 375 個屬性。

CSS 包含大量的佈局模型，如多種箱模型、浮動元素、表、多列文本、分頁媒介等。還有像 flexbox 和 grid 的佈局模型在之後也被添加進去，因為開發人員和設計人員需要對佈局進行更多地控制，而不得不使用表格和透明圖像來獲取他們想要的佈局。在傳統佈局中，開發人員無法添加新的佈局模型，因此必須將 flexbox 和 grid 添加到 CSS 中並在所有瀏覽器上實現。

傳統佈局的另一個問題是規則可以相互影響甚至發生衝突，通常有幾十種規則元素的規則應用於他們，這使得佈局變慢。更糟糕的是，佈局性能通常為指數性下降，因此，隨著元件數量的增加，佈局變慢得更快。

Flutter 最開始是 Google Chrome 瀏覽器小組成員進行的實驗項目，我們想看看如果我們忽略了傳統的佈局模式，是否可以構建更快的渲染器。幾周後，我們在性能上取得了顯著增長，我們發現：

• 大多數的佈局是相對簡單的，例如：滾動頁面上的文本，其大小和位置只取決於顯示大小的固定矩形，還有一些表格，浮動元素等。

• 大部分佈局只作用於 UI 組件樹的一部分，並且這子樹通常使用一個佈局模型，因此這些 UI 組件只需要少量的規則。

我們意識到如果完全改變以前的佈局模式，佈局就可以大大被簡化：

• 每個 UI 組件都將指定自己簡單的佈局模型，而不是擁有可以應用於任何 UI 組件的一整套佈局規則。

• 因為每個 UI 組件都有一個更小的一套佈局需要考慮，所以佈局可以大量優化。

• 為了進一步簡化佈局，我們幾乎將所有內容都轉換為 UI 組件。

這裡是用 Flutter 代碼來創建的一個帶有佈局的簡單 UI 組件。

 new Center ( child: new Column( children:[ new Text ('Hello, World!')), new Icon (Icons.star, color: Colors.green) ] )

這段代碼在語義上足夠清晰。您可以輕鬆地想象它將會生成什麼。運行這段代碼的顯示結果如下：

Hello, World!

在這段代碼中，所有的組成部分都是一個 UI 組件，包括佈局。 Center UI 組件將其子組件集中在其母組件內（如屏幕）。ColumnUI 組件垂直排列其子組件（UI 組件列表）。該列表包含一個 Text 和一個 Icon 控件（具有一個顏色屬性）。

在 Flutter 中，居中顯示和 padding 都是 widgets，主題是適用於它們子組件的 UI 控件，甚至應用程序和導航也是 widgets。

Flutter 包括很多用於佈局的 widgets，不僅僅含有列，還包括行、網格、列表等。 此外，Flutter 還有一個獨特的佈局模型，我們稱之為用於滾動的“長條佈局模型 (sliver layout model)”。Flutter 中的佈局非常快，可用於滾動。試想一下，滾動必須如此快速平滑，以至於讓用戶感覺當他們在物理屏幕上拖動時，屏幕圖像就像和他們的手指相連一樣。

通過使用佈局進行滾動，Flutter 可以實現高級滾動，如下所示。請注意，這些是 GIF 動畫，真正的 Flutter 應用程序更加平滑。您可以（並且應該）自己運行這些應用程序，請參閱本文末尾的參考資料部分。

在大多數情況下，Flutter 僅需一次傳遞即可完成佈局，這意味著佈局所花的時間是線性增長的，所以它可以處理大量的 widgets。Flutter 也可以利用緩存或其他功能來避免重複的佈局。

定製設計

因為 UI 組件現在是應用程序的一部分，你可以添加新的 UI 組件，並且可以自定義現有的 UI 組件，以使其具有不同的外觀或感覺，或匹配公司的品牌，移動設計的趨勢正在與幾年前普遍使用的千篇一律的應用程序背離，開始走向讓用戶愉悅的定製設計。

Flutter 配有豐富的可定製的 Android、iOS 和 Material Design 組件（實際上，我們已經被告知 Flutter 是 Material Design 中具有最高保真度之一的實現），我們使用 Flutter 的可定製特點來構建這些組件庫，以匹配多個平臺上的原生組件的外觀和感覺。程序開發人員可以使用相似的可定製性功能進一步調整小組件以滿足他們的需求。

更多關於響應式視圖

現有的響應式 web 視圖庫都引入了 虛擬 DOM，DOM 代表 HTML 的文檔對象模型。JavaScript 用 DOM 提供的 API 來操縱表現為一個元素樹的 HTML 文檔。虛擬 DOM 是使用編程語言中的對象（在這種情況下為 JavaScript）創建的 DOM 的抽象版本。

在響應式 Web 視圖（由 ReactJS 和其他系統實現）中，虛擬 DOM 是不可變的，每次更改，所有的東西都得重建。系統將虛擬 DOM 與真正的 DOM 進行比較，生成一組最小的更改，然後執行這些更改，以更新真正的 DOM。最後，平臺重新繪製真實的 DOM 到畫布中。

這聽起來增加了很多額外的工作，但它是值得的，因為 操縱 HTML DOM 是非常耗費系統資源的。

React Native 也做類似的工作，但是是在移動應用程序當中進行的。它會操控移動平臺上的原生組件而不是 DOM。它構建一個 UI 組件的虛擬樹，與原生組件進行比較，並只更新已更改的部件。

請記住，React Native 必須通過橋接器與原生部件進行通信，因此，UI 組件的虛擬樹可以幫助保持傳遞橋的最小值，同時還允許使用原生部件。最後，一旦更新了本機部件，平臺就會將它們渲染到畫布上。

React Native 是移動開發的一大進步，並且是 Flutter 的靈感來源，但 Flutter 更進一步。

回想一下，在 Flutter 中，UI 組件和渲染器已經從平臺中集成到用戶的應用程序中。沒有系統 UI 組件可以操作，所以原來虛擬控件樹的地方現在是真實的控件樹。Flutter 渲染 UI 控件樹並將其繪製到平臺畫布上。這很好，既簡單又快。 此外，動畫發生在用戶空間中，因此應用程序（因此開發人員）可以對其進行更多的控制。

Flutter 渲染器本身很有趣：它使用幾個內部樹結構來渲染只需要在屏幕上更新的 UI 組件。例如，渲染器使用“ 使用 合成的結構重繪”(這意味著比使用屏幕上的矩形區域更有效）。不變的 UI 控件，即使是那些已經移動的 UI 控件，僅需在內存中做極其細微的改動，速度當然超級快。這就是為什麼 Flutter 的滾動性能如此之高，即使在很複雜的滾動場景中。

要進一步瞭解 Flutter 渲染器，我 推薦這個視頻。你也可以看看代碼，因為 Flutter 是開源 的。當然，您可以自定義或甚至替換整個堆棧，包括渲染器，合成器，動畫，手勢識別器，當然還有 widgets。

Dart 編程語言

因為 Flutter 像使用響應式視圖的其他系統一樣，刷新每個新框架的視圖樹，它會創建許多隻能在一幀（六十分之一秒）內存在的對象。幸運的是，Dart 使用“generational garbage collection ”對於這樣的系統來說是非常有效的，因為對象（特別是壽命短的）消耗資源相對較少。此外，可以使用單個 pointer bump 來完成對象的分配。這是一個快速且不需要鎖定的 pointer bump。這有助於避免 UI 卡頓。

Dart 還有一個“tree shaking ”編譯器，它只包含你在應用程序中需要的代碼。 即使您只需要一個或兩個，您也可以隨意使用大型的 UI 控件庫。

熱重載

Flutter 最受歡迎的功能之一是其快速，保留程序狀態的熱重載 （hot reload）。 您可以在 Flutter 應用程序運行時對其進行更改，重新加載應用程序的代碼，將其從之前的操作位置繼續下去。一次熱重載通常用不到一秒鐘。 如果您的應用遇到錯誤，您通常可以修復錯誤，然後繼續，就像錯誤從未發生過。 即使你必須完全重新加載，它也是很快速的。

開發人員告訴我們，這可以讓他們“繪製”他們的應用程序，一次更改，然後幾乎立即可以看到結果，而無需重新啟動應用程序。

兼容性

因為 UI 組件（和這些 UI 組件的渲染器）是您的應用程序的一部分，而不是平臺的一部分，不需要“兼容庫 ”。 您的應用程序不僅可以正常工作，而且在最近的操作系統版本 Jelly Bean 以後的安卓系統和 8.0 以後的 iOS 系統上也是一樣的 。 這顯著降低了在舊版本操作系統上測試應用程序的需求。 此外，你的 App 有很大可能與未來的操作系統版本兼容。

我們曾被問到一個潛在的問題。 由於 Flutter 不使用原生 UI 組件，因此，當新的 iOS 或 Android 版本出現時，Flutter UI 組件是否需要更新才能支持新的部件，或更改現有部件的外觀或行為嗎？

• 首先，Google 是 Flutter 的內部的一個大用戶，所以我們有很大的動機來更新 UI 組件，使其保持最新狀態並儘可能接近當前的原生 UI 組件。

• 如果有一段時間我們在更新一個 UI 組件時太慢，Google 並不是 Flutter 唯一一個保持 UI 組件最新的用戶。Flutter 的 UI 組件是可擴展和可定製的，任何人都可以更新它們，包括你自己， 甚至不需要提交一個請求。 你永遠不必等待 Flutter 自己更新。

• 只有當您想要在應用中反映出新的更改時，上述要點才適用。 如果您不想要更改影響您的應用程序的外觀或工作方式，那麼就沒有必要使用上面所說的。 UI 組件是您的應用程序的一部分，所以 UI 永遠不會在你不知情的情況下擅自改變，並使您的應用程序看起來不好（或更糟的是，破壞您的應用程序）。

• 還有一個額外的好處，您可以編寫您的應用程序，以便即使在較舊的操作系統版本上也能使用新的 UI 組件。

其他優勢

Flutter 的簡單性使其運行很快，但它的可定製性和可擴展性，保持簡單的同時擁有強大功能。

Dart 擁有一個 軟件包倉庫。您可以用這些軟件包擴展應用程序的功能。 例如，有許多軟件包可以輕鬆訪問 Firebase，以便您可以構建“無服務器”應用程序。 外部貢獻者創建了一個可讓您訪問 Redux data store 的軟件包。 還有一些稱為“ plugins ”的軟件包，可以以獨立於操作系統的方式輕鬆訪問平臺服務和硬件，例如加速度計或相機。

當然，Flutter 也是一個 開放源碼 的項目 ，加上 Flutter 渲染堆棧是您應用程序的一部分，這意味著您可以自定義幾乎任何您想要的應用程序。 該圖中綠色的部分您都可以定製：

那麼，“Flutter 有什麼新鮮又令人興奮的”呢？

如果有人問你 Flutter，現在你知道如何回答他們了：

• 響應式視圖的優點，不需要 JavaScript 的橋接器

• 快速，流暢，可預測 ; 代碼將 AOT 編譯為本機（ARM）代碼

• 開發人員完全控制 UI 組件和佈局

• 配有美觀，可定製的 UI 組件

• 強大的開發者工具，驚人的熱重新加載

• 性能更好，兼容性更好，開發起來更有樂趣

你注意到我把什麼移出這個名單嗎？ 這是通常人們在談論 Flutter 時提到的第一件事，但對我來說，這是 Flutter 中最不重要的事情之一。

這就是，Flutter 可以從單個代碼庫為多個平臺構建漂亮而快速的應用程序。 當然這應該列出來的！ 它的可定製性和可擴展性可以輕鬆將 Flutter 定位到多個平臺，而不會犧牲性能或功耗。

Flutter 的革命性

我還沒有完全解釋為什麼 Flutter 是“革命性”的。 這其實是一個很合適的評價，因為外部開發人員用 Flutter 構建的 第一個主要應用程序 之一是描述美國獨立戰爭時期的《 漢密爾頓：美國音樂劇 》的官方應用程序。 《漢密爾頓》是百老匯最受歡迎的音樂劇之一。

該應用的開發團隊 Posse 表示，他們選擇了 Flutter 是因為他們需要在 短短的三個月內 構建應用程序。 他們稱之為“一個革命性表演的革命性應用程序”，並說“Flutter 是美觀，高性能，品牌驅動的移動體驗的絕佳選擇”。該應用程序在 Android 和 iOS 的應用商店上都可下載，並且得到了越來越多的好評。

加入革命！

Flutter 目前是 Alpha 版本。 我們還在增加更多的功能，並且我們有更多的優化計劃。 然而，Google 內部和外部的群組已經在使用它來構建任務關鍵型應用程序。

如果您對 Flutter 感興趣， 您可以 安裝它，並體驗 隨附安裝 的一些示例應用程序 ， 注意一定要試一下熱重載。

如果您不是開發人員或只想看到某些應用程序，則可以安裝使用 Flutter 構建的應用程序，並查看它們的外觀和性能。 我推薦 漢密爾頓應用程序 ，但還有其他應用程序 。 您還應該觀看來自 Google I / O 的視頻 ，他們在那裡直播 Flutter 應用程序的編譯過程。

網站

• Flutter 網站：

  https://flutter.io/

• 源存儲庫 （歡迎發送請求！）：

  https://github.com/flutter/flutter