【一探究竟】Flutter究竟是什麼？

時間 2019-11-06

標籤一探究竟 flutter 究竟什麼简体版

原文原文鏈接

起源

咱們從官網的介紹開始提及。web

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.瀏覽器

Flutter 是 Google 的 UI 工具包，用於從單個代碼庫構建漂亮的、本地編譯的移動、web 和桌面應用程序。架構

因此正如咱們（看了不少網上的文章後）所知，Flutter是一個開源的、跨平臺的UI框架，用它開發的應用程序都具備高保真度和高性能表現。app

但也許咱們不知道或不太明白的是：框架

到底什麼是UI框架?
到底什麼是高保真度？
到底什麼是高性能表現？
Flutter是如何作到跨平臺的？
Flutter是如何作到高保真度的？
Flutter是如何作到高性能表現的？

以上問題咱們將各個擊破，不過在開始前咱們先插播一段Flutter背景簡介~函數

Flutter背景簡介

Flutter的前身是 Google 內部孵化的Sky項目，於2014年10月在 GitHub 上開源一年後，於2015年10月正式改名爲Flutter。工具

Flutter是衆多跨平臺框架中的一個，其不一樣之處在於採用了自繪UI+原生的實現方案，相比於H5+原生和JavaScript開發+原生渲染類的方案，這是一種更爲完全的方案，而且它天生具有兩大優勢：佈局

在不一樣平臺的 UI 表現可作到高保真度、高一致性
繪製 UI 的性能和原生控件接近

Flutter的目標在於作全平臺！開發者只需使用同一套基準代碼，即可爲移動平臺、桌面端和網頁端開發應用。而目前來看Flutter所支持或將支持的平臺已經有 Android、iOS、Fuchsia、Chrome OS，另外我認爲將來支持鴻蒙OS（一款讓咱們引覺得傲的操做系統）也必將是件水到渠成的事~post

更多背景相關知識我在拜讀的文章中貼出了連接，你們可自行食用。性能

到底什麼是UI框架?

咱們把UI和框架拆開，分別來作解釋。

UI是User Interface的縮寫，是用戶界面的意思，但在咱們軟件領域廣泛的認識裏，UI設計實際是指軟件的人機交互、操做邏輯、界面美觀性的總體設計，因此UI就是指軟件的交互操做和視覺效果。

框架在百度百科上的釋義以下（你們感覺下）：

框架（framework）是一個框子——指其約束性，也是一個架子——指其支撐性。是一個基本概念上的結構，用於去解決或者處理複雜的問題。

而在咱們軟件領域，框架能夠理解爲是一個用來開發軟件的工具包，它已處理好了通用的、基礎性的工做，而且制定好了使用規則。

因此總結一下，UI框架就是指用來開發軟件的工具包，且該軟件能夠帶有交互操做和美觀的視覺效果。

到底什麼是高保真度？

（這詞乍一看怪嚇人的，讓人頭皮發麻，萌生吐意🤮，誰叫我不是廈大的呢？）

高保真是聲音技術領域的專業術語，是指與原來的聲音高度類似的重放聲音。

但在咱們軟件領域，高保真度其實就是高還原度的意思，旨在能夠像素級還原UI稿的交互與視覺效果。

到底什麼是高性能表現？

（如下提及性能的時候，都指的是在軟件開發領域~）

性能是個司空見慣的詞，但性能究竟是什麼意思呢？可能在咱們心中是既知道又說不清楚的含糊狀態。

性能的英文是Performance，它也有表現、工做狀況的意思。

當提及性能的時候，咱們都能聯想起一些關鍵詞，好比：啓動速度、內存使用優化、佈局優化、電量優化、包瘦身等等。

因此綜上能夠感覺出來，性能是一個軟件多維度指標表現狀況的代名詞，高性能表現就是指軟件各項指標都表現優異。（該快的快、該少的少、該大的大😁、該小的小）

Flutter是如何作到跨平臺的？

這裏搬出Flutter官方分層架構圖，在大的層次上，從上到下依次分爲以下三層（能夠看出 Framework 層內部又會分層）：

Framework框架層：一個純Dart實現的SDK（一套基礎庫），負責 UI 相關的事情，如：動畫、widget、繪圖、手勢、基礎能力等。（咱們的應用就是圍繞這層來構建的）
- 在該層內部 Foundation 和 Animation、Painting、Gestures 對應的是 Flutter 中的dart:ui 包，它是 Flutter 引擎暴露的底層 UI 庫，用來提供動畫、手勢及繪製等能力。
Engine引擎層：一個純C++實現的SDK，主要包括 Skia 引擎（開源的二位圖形庫）、Dart 運行時、GC垃圾回收、編譯模式支持、Text 文字排版引擎等。
Embedder嵌入器層：見名知意是將 Flutter 移植到各平臺的中間層代碼，作好這一層的適配 Flutter 基本能夠嵌入到任何平臺上去。它主要包括渲染Surface設置、原平生臺插件、打包、線程管理、事件循環交互操做等。

因此能夠看出在設計上Embedder層要作的工做就是隔離並適配不一樣平臺的差別，保證對上層暴露統一的API，以此來達到跨平臺的目的。不管如今的Android、iOS仍是將來的Fuchsia、鴻蒙OS，亦或是其餘嵌入式操做系統（好比樹莓派上的系統 Raspbian ），理論上 Flutter 都是能夠跨上去的😎。

以上是針對跨操做系統而言的，在最近剛發步的 Flutter 1.9 中Flutter for web的支持雖然還處於預覽版，但 flutter_web 這個 repo 已經合併到了 flutter 的主 repo，這也是一個重要的里程碑了。那麼Flutter是如何作到支持Web的呢？

如架構圖所示，Framework 層在移動和 web 平臺是共享的，固然爲了支持 web ，官方對dart:ui庫作了新的適配。而後即是使用基於 DOM、Canvas 和 CSS 的代碼替換了移動平臺上 Skia 實現的引擎層，當咱們爲 Web 平臺編譯 Flutter 代碼時，應用、Flutter 框架、以及 Web 版本的 dart:ui 庫都將編譯爲 JavaScript ，能夠運行在任何現代瀏覽器上。

Flutter是如何作到高保真度的？

根據前文這個問題能夠轉化爲：Flutter是如何作到能夠像素級還原UI稿的交互與視覺效果的？

這點首先得益於選擇了自繪UI的技術方向，基於這個方向 Flutter 在 Engine 層使用了跨平臺自繪引擎Skia和文字排版引擎來作底層渲染（或是for web 的引擎代碼），在 Framework 層構建了一整套本身的UI系統，而不依賴任何原生的控件。如此一來，佈局、動畫、手勢、繪製等全權盡在掌控之中，要作到高保真也就手到擒來了。

下面引用《Flutter 實戰》一書中，關於 Skia 的一段描述：

Flutter使用Skia做爲其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫，包含字型、座標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了很是友好的API，目前Google Chrome瀏覽器和Android均採用Skia做爲其繪圖引擎。

Flutter是如何作到高性能表現的？

首先高或低是個相對的概念，而 Flutter 的高性能來自於兩個比較：

如下兩點引用自《Flutter 實戰》一書

Flutter APP 採用 Dart 語言開發。Dart 在 JIT（即時編譯）模式下，速度與 JavaScript 基本持平。可是 Dart 支持 AOT，當以 AOT 模式運行時，JavaScript 便遠遠追不上了。速度的提高對高幀率下的視圖數據計算頗有幫助。

Flutter 使用本身的渲染引擎來繪製 UI ，佈局數據等由 Dart 語言直接控制，因此在佈局過程當中不須要像 RN 那樣要在 JavaScript 和 Native 之間通訊，這在一些滑動和拖動的場景下具備明顯優點，由於在滑動和拖動過程每每都會引發佈局發生變化，因此 JavaScript 須要和 Native 之間不停的同步佈局信息，這和在瀏覽器中要 JavaScript 頻繁操做 DOM 所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

文末

因此綜上所述，Flutter 究竟是什麼呢？在我看來，它或將是終端開發的將來。

我的能力有限，若有不正之處歡迎你們批評指出，我會虛心接受並第一時間修改，以不誤導你們。

拜讀的文章

個人其它文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。