Flutter

• Flutter谷歌的移動端UI框架，使用Dart語言開發(fā)，可以快速的在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

以往的跨平臺框架

• WebView，這是第一個跨平臺框架，基于JavaScript 和 WebView 例如 Cordova、PhoneGap、APPCan、Ionic等，應(yīng)用程序可以編寫成Html，并最終在移動平臺的Webview中顯示，并通過JavaScript interface和原生交互。

  缺點(diǎn)：

  • 加載速度慢，達(dá)不到原生UI體驗(yàn)。
  • 內(nèi)存消耗比較大。
  • 手勢、動畫和原生差距較大。
  • 相關(guān)原生功能支持有限。

• 響應(yīng)式視圖，原生體驗(yàn)的第二代跨平臺框架，如ReactNative/Weex,生成虛擬DOM，并進(jìn)一步對應(yīng)生成原生的組件，讓頁面由原生組件組成，來到達(dá)原生的體驗(yàn)。JS代碼和原生代碼本身都是很快的，瓶頸經(jīng)常發(fā)生在當(dāng)我們視圖從一邊轉(zhuǎn)向另一邊時，所以構(gòu)建高質(zhì)量的應(yīng)用程序時，我們必須將使用橋接的次數(shù)控制到最小。

  缺點(diǎn)：

  • 虛擬DOM和原生組件的溝通需要Bridge。
  • 一些復(fù)雜的交互組件和動畫性能上表現(xiàn)達(dá)不到原生效果。
  • 各平臺之間的兼容問題。

• Flutter，第三代跨平臺框架，F(xiàn)lutter也提供響應(yīng)式的視圖，F(xiàn)lutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯，Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，同時使用Skia圖形引擎來完成圖形、文本、圖像、動畫等繪制，擁有自己獨(dú)立的一套圖形系統(tǒng)，不再依賴于原生。

• 更多內(nèi)容見

  Flutter中文網(wǎng)
  

  移動開發(fā)新利器 | 一文深入了解 Flutter 界面開發(fā)

  下一代移動端跨平臺框架-Flutter大解密

開始使用

• 現(xiàn)在按照Flutter中文網(wǎng)上面的資料，做Demo體驗(yàn)下Flutter。更多內(nèi)容后期抽空探索。

• 要獲得Flutter，請先使用git克隆Flutter，然后將該flutter工具添加到您的用戶路徑。運(yùn)行 flutter doctor 顯示您可能需要安裝的剩余依賴項(xiàng)。

• 獲取Flutter SDK

  git clone -b beta https://github.com/flutter/flutter.git
  

• 修改環(huán)境變量 open ~/.bash_profile 將下面內(nèi)容加入配置文件，并source ~/.bash_profile 刷新當(dāng)前終端窗口。

  export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
  export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
  
  //注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/document/code”
  

• 運(yùn)行 flutter doctor

  一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。

• Android Studio安裝Flutter和Dart插件，在插件搜索中搜索Flutter，安裝重啟studio。

  • Flutter插件： 支持Flutter開發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等).

  • Dart插件： 提供代碼分析 (輸入代碼時進(jìn)行驗(yàn)證、代碼補(bǔ)全等).

• 創(chuàng)建一個新應(yīng)用

  • 選擇 File>New Flutter Project

  • 選擇 Flutter application 作為 project 類型

  • 然后點(diǎn)擊 Next輸入項(xiàng)目名稱 (如 myapp), 然后點(diǎn)擊 Next

  • 點(diǎn)擊 Finish等待Android Studio安裝SDK并創(chuàng)建項(xiàng)目

  • 在項(xiàng)目目錄中，您應(yīng)用程序的代碼位于 ==lib/main.dart.==

• 下面用豆瓣電影的API做了一個簡易丑陋的Demo，主要是體驗(yàn)Flutter創(chuàng)建界面、網(wǎng)絡(luò)請求、數(shù)據(jù)解析的過程。

項(xiàng)目結(jié)構(gòu)圖

丑陋的運(yùn)行效果

https://github.com/HappyMiao/FlutterDemo