Flutter教程(1)——快速預覽

簡介

Flutter 是 Google 用以幫助開發者在 iOS 和 Android 兩個平臺開發高質量原生 UI 的移動 SDK。只須要維護一套代碼就能在ios和Android中構建漂亮的App應用，而且性能不遜色於原生應用。這篇文章主要是經過蜻蜓點水的方式快速預覽Flutter。

總體框架

Flutter包括一個現代的響應式框架，一個2D渲染引擎、現成的widget和開發工具。這些組件能夠幫助您快速地設計、構建、測試和調試應用程序。

Flutter Widget

Flutter Widget一個現代響應式框架，主要從React中獲取的靈感，中心思想是用Widget構建UI。Weiget描述了他們的視圖。當widget的狀態發送變化的時候，widget會重繪UI，Flutter會對比先後變化的不一樣，以肯定底層渲染樹從一個狀態轉換到下一個狀態所需的最小更改，相似於React中虛擬DOM的diff算法。總之Widget描述了Flutter的佈局和交互方式。

咱們能夠用簡單的"Hello,world"大致對比下Flutter和React的代碼。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}
複製代碼

咱們翻譯成React就像下面這樣

class MyApp extends Component {
  render() {
    return (
      <Center> <Text textDirection={TextDirection.ltr}>Hello, world!</Text> </Center>
    )
  }
}
複製代碼

Flutter和React很是類似，只是把React的JSX變成了一個純對象，把Component變成StatelessWidget。我的認爲JSX的描述方式比較直觀，第一是習慣問題，第二是用對象形式若是層層嵌套末尾都用「)」，很難辨認出對應的代碼段是哪一個控件，固然如今IDE都會在末尾自動註釋來解決這些問題。因此習慣因素是主導我以爲JSX比較好看的緣由。

這裏一個知識點StatelessWidget是有無狀態組件，還有個有狀態組件StatefulWidget，能夠經過setState()來改變狀態。熟悉React的同窗是否是很是熟悉，這些內容後面會再講到。

整體上就是經過Widget來組合，像搭積木同樣描述界面。

使用語言Dart

對的，Flutter既不是用JS/TS或者是Java這類的主流語言，而是用Dart。說道Dart其實很容易就會想到Typescript，他們其實都是altjs語言。Typescript目標是作到兼容JS，是一個嚴格的超集。而Dart是徹底推翻Javascript，採起替代的策略，從新制造一門語言。固然不管對於熟悉js或java的同窗都很容易上手。網上有個網友寫的《爲JavaScript開發人員準備的Dart參考教程》，能夠快速的參考上手。

Flutter分層框架預覽

Flutter 總體架構主要分三層：Framework，Engine 與 Embedder。

1. Framework層，日常開發都在這層，Material和Cupertino是最最上層的設計框架，一個是Android的一個ios的，相似antD，只是一種UI設計框架，用戶本身選一個就好。Widgets上面提到的，這個是整個Flutter最重要的組件。而後就是渲染、動畫、手勢等。

2. Engine是由C/C++寫的渲染引擎，包含Skia，Dart和Text，這裏着重說下Skia渲染引擎，Skia是一個開源的二維圖形庫，提供各類經常使用的API，並可在多種軟硬件平臺上運行。谷歌Chrome瀏覽器、Chrome OS、安卓、火狐瀏覽器、火狐操做系統以及其它許多產品都使用它做爲圖形引擎，也支持Windows 7+，macOS 10.10.5+，iOS8+，Android4.1+，Ubuntu14.04+ 等平臺。

3. Embedder是一個嵌入層，即把Flutter嵌入到各個平臺上去，這裏作的主要工做包括渲染Surface設置，線程設置，以及插件等。從這裏能夠看出，Flutter的平臺相關層很低，平臺(android，iOS)只是提供一個畫布，剩餘的全部渲染相關的邏輯都在Flutter內部，這就使得它具備了很好的跨端一致性。可是這就致使一些問題，好比地圖這種插件就須要額外的造輪子，而不能使用現有原生的插件。可是我以爲跨端一致性纔是款平臺最重要的理念，這方面生態上去必然會克服的。

對比React Native

Flutter直接競爭對手確定是React Native，二者都是很是優秀的跨平臺移動應用框架。

先看下React Native和Flutter近5年的Google搜索熱度比較。

能夠看出React Native在2016年就開始穩健的上升，而Flutter是在2018年2月份的時候纔開始有上升趨勢。如今Flutter依然是比React Native熱度低，可是很是接近了。雖然只是一個搜索的熱度圖，可是能夠側面的說明了，React Native由於比較早，成熟度比Flutter高，而Flutter到2018年纔開始慢慢變熱門。

性能

React Native是經過Javascript在Chromium解釋運行而後調用原生組件渲染，Flutter經過Dart直接AOT編譯爲本地代碼，去控制Skia2d渲染引擎。因此從理論上來講，由於React Native多了一層Bridge解釋溝通，而Flutter是直接AOT編譯運行本地代碼，並直接由Skia接管，速度是會優於React Native的。

以下圖(from What makes Flutter fast, Yuqian Li on D2)，能夠看到Flutter調用和Android原生調用是如出一轍的，直接由framework層調用到Skia，而ReactNative有個中間層去調度。

跨端一致性和保留原生

Flutter由於Skia，低層就是一個受控的畫布，Flutter可讓你控制屏幕上的每個像素，可讓你輕鬆生成動畫圖形、視頻、文本和控件，是真的能夠達到跨端一致性。而React Native是用Javascript控制原生控件，壞處是要根據不一樣端差別性進行妥協，好處是保留了原生能力，就是原來原生的一套如今均可以用。跨端一致性和保留原生在必定程度上是一個矛盾體，就看我的如何衡量利弊了。可是我我的認爲跨端一致性纔是真的款平臺所須要的樣子。

穩定性和生態圈

React Native如今已經相對成熟了，目前許多坑好比拍照，地圖，視頻，通知......等等都獲得了良好解決，可是Flutter還在這些填坑的路上，東西都有，可是能保證沒坑是不可能的。因此現階段除非新產品嚐鮮，不怕填坑，若是要穩定的輸出成熟的產品我仍是推薦React Native的。

由於Flutter選擇Dart，生態圈遠比React Native小不少。畢竟React Native發展多年，又背靠Javascript、React、原生Native，這些是Flutter遠遠趕不上的。

開發上手

首先不管是Flutter仍是React Native都須要Native開發相關的知識。可是Flutter畢竟要多學習一門新的語言Dart，雖然Dart很容易上手，可是好上手並不等於能彌補對這門語言的理解和坑，這些都須要經驗來填充的。因此上手難度仍是比React Native高一些

總之我看重Flutter，不是由於他上層的Weiget框架和Dart語言，而是由於Flutter Engine底層渲染引擎，就算只看UI層，他抹平了平臺的差別，實現正的跨平臺一致性。可是若是把Weiget和Dart換成React和Typescript我會更加支持Flutter，這樣纔是真的減小咱們程序員的學習成本。畢竟同一套理念，換了一套標準去實現，是很是難受的一件事。固然Flutter是Google的，Typescript是微軟的，React是Facebook的，因此大家知道的，這隻能是我我的美好的烏托邦。

後續更新