谷歌官方6月21日宣布Flutter的首個發布預覽版（Release Preview 1）正式發布，這標志著谷歌進入了Flutter正式版（1.0）發布前的最后階段。

聽我們大神說這個東西有搞頭，之前有做過一段時間ionic，了解過一些mobilephone的東西。所以最近開始搗鼓下flutter。這里記錄一下作為一個iOS Developer的使用感受和一些心得體會。

Flutter是什么

Flutter是一個由谷歌開發的開源移動應用軟件開發工具包，用于為Android和iOS開發應用，同時也將是Google Fuchsia下開發應用的主要工具。Flutter框架包含了兩套匹配特定設計語言的組件。稱作Material Design的組件實現的是同名的谷歌設計語言，稱作Cupertino的組件模仿了蘋果iOS的。---維基百科

簡單來說它與RN、Ionic、Weex等眾多混合開發平臺框架一樣，都是一套代碼實現多平臺發布的跨平臺框架。Flutter是以dart為基礎做出的一套SDK，支持在Android和iOS上構建APP。具體的可以看flutte?r官網的介紹。

Flutter與其他Hybird框?架的不同

首先要說的就是他的構建方式，?有說到它屬于Dart的一個SDK。我覺得Flutter與其他跨平臺的最大不同之處是它自建了一個2D渲染引擎，在性能上要比其他基于js的框架好上很多，后面會講到具體性能部分。
代碼風格和java比較接近，個人感覺和前端標簽也很像，有人說喜歡XML布局的對于Dart會比較難受。它的UI布局思想是一切皆為widget，大家感受一下：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { _counter++; }); }@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: new Text(widget.title), ), body: new Center( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ),floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 

上面這個是初始化flutter的時候默認的代碼。

效果圖

就我個人而言，第一眼看到這個的時候覺得還算好，當我自己寫了一份個人中心的時候發現真的是有點心累，一行行的堆疊真的是很煩，每一個都有子類然后還有繼續堆疊，在開發APP的時候最不喜歡的事就是多層嵌套，尤其是邏輯判斷的時候。我們都會想著盡量簡化邏輯代碼不簡化邏輯達到我們想要的效果，避免因為多層嵌套邏輯使代碼沒有可讀性維護性，本著這個思想后重新對他做簡化，發現下面提到的5個重點中所有東西都是一個小部件是核心內容，你把每一個嵌套都拿出去做一個View來看就會變得很簡單，尤其是flutter是一種響應式框架。

使用時遇到的坑和一些提醒

首先要說的是一定要用編輯器，真的。。。
_{1.我在第一次配置時直接clone了flutter的倉庫，配置環境變量。在配置的過程中一直卡在改PATH這，為什么呢？因為我懶直接復制了官方的終端命令，在都配置完事后回頭調查PATH錯誤問題是發現是文檔給的命令多了一個空格。。。}Ps：現在已經更改掉了，而且貼心的使用了pwd，請放心復制。
_{2.千萬別升級到最新系統，在配置的過程中想體驗一下新的夜間模式，更想耍一下黑色背景的Xcode。我把系統升級到了Mojave，然后驚喜的發現幾個必要工具裝不上（libimobiledevice，ideviceinstaller）}Ps：開心~，在前幾天這個問題也被解決了！如果你是最新系統，有提示你升級Xcode的時候你發現你是最新的Xcode，參照下圖改一下就好了。

切換Command Line tools
3.Android這方面不太懂，但是有科學梯子即可，我是這樣的根據 flutterdoctor 命令不停的更新Android需要的文件，最終都可以解決。
4.使用編譯器可以省去很多步驟，也可以漂（lan）亮（duo）的開發~，當然你還是要配置一些必要工具，如第二條所寫，但是可以幫你節省配置路徑問題
5.pod setup 你會等到你懷疑你的人生到底是為了寫代碼還是看他不停地報錯，最簡單的方法是直接在github上下載一份zip文件（cocoapod有個叫Space的文件）然后到這個路徑下cd $HOME/.cocoapods/repos（如果你setup了一般都會有，真沒有你就創建一份唄）把剛剛下載的zip文件解壓到這里。重新pod setup下就可以了（不可以的嘗試pod search下建立下索引）。
6.在開發過程中發現必須要開啟一個模擬器，無論是安卓的還是iOS的，無論真機還是模擬器必須有一個在運行中才能啟動APP。當你同時連接多個時具體會連哪一個我還沒找到文檔說明，但是實際情況是一定會先連真機。
7.Debug和Release的ipa方式不一樣，你需要在 Flutter代碼項目下面執行

 flutter build aot --release --target-platform ios --ios-arch armv7,arm64 

去 build目錄下找到 App.framework替換iOS文件夾下的同文件
然后把 Flutter.framework替換成 flutter/bin/cache/artifacts/engine/ios-release/Flutter.framework的這個。
PS：其他還有的會繼續補充，如果有你發現的新問題隨時歡迎留言~

探討

為什么使用flutter

Google Flutter--5 reasons why you may love it：

• 熱重載（這個感覺還一般，而且比較費內存也無法真正測試你的APP性能）
• 全套小部件（這是我最喜歡的）
• 所有東西都是一個小部件（這個也不錯）
• Android / iOS 差異化主題（iOS：Cupertino，Android：Material Design）
• 非常、非常、非常多的資源 （官方支持的資源很多，比如上邊的代碼有自帶的themedata，scaffold，tarbar等等會節省你太多的開發時間，我覺得weex開發者會有深刻的體會吧）
• 我覺得還可以加一條，就是他的響應式框架，響應式試圖- - - 不需要 JavaScript 的橋接器。目前已知的ReactX包含了眾多的響應式語言，RxDart對于flutter或者說Dart來說只是一個增強包，下面也會稍微詳細的說一下。

響應式框架

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

Flutter框架

下面這個是組合型視圖：

視圖樹

還有代理性的ProxyWidget作用是數據傳遞以及展示型的widget，具體的大家可以自己查找一下。
StatefullWidget存在中間狀態變化且都是immutable的，狀態變化存儲在哪里？Flutter 引入state的類用于存放中間態，通過調用state.setState()進行此節點及以下的整個子樹更新。在iOS中的Controller有生命周期，那么state的周期呢？

initState()： state create之后被insert到tree時調用的 didUpdateWidget(newWidget)：祖先節點rebuild widget時調用 deactivate()：widget被remove的時候調用，一個widget從tree中remove掉，可以在dispose接口被調用前，重新instert到一個新tree中 didChangeDependencies()： 初始化時，在initState()之后立刻調用 當依賴的InheritedWidget rebuild,會觸發此接口被調用 build()： After calling [initState]. After calling [didUpdateWidget]. After receiving a call to [setState]. After a dependency of this [State] object changes (e.g., an[InheritedWidget] referenced by the previous [build] changes). After calling [deactivate] and then reinserting the [State] object into the tree at another location. dispose()：Widget徹底銷毀時調用 reassemble()： hot reload調用 

性能

和 React Native 一樣，Flutter 也提供響應式的視圖，Flutter 采用不同的方法避免由 JavaScript 橋接器引起的性能問題，即用名為 Dart 的程序語言來編譯。Dart是用預編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，同時使用Skia圖形引擎來完成圖形、文本、圖像、動畫等繪制，擁有自己獨立的一套圖形系統，不再依賴于原生。而不需要通過執行上下文切換的 JavaScript 橋接器。編譯為原生代碼也可以加快應用程序的啟動時間。雖然比其他框架來說不需要JavaScript橋接器，但是性能相對于native來說還是有差距的，至少現在的preview版本來說內存利用以及CPU的使用上都是趕不上native的。我在做測試的時候發現內存使用率上一致居高不下，但是后來發現應該是熱更新造成的，當我想在release模式的時候發現又出現更多問題，具體的看編譯內容，推薦看下這篇文章How fast is Flutter? I built a stopwatch app to find out.
總結來說就是說，雖然實用了自己的渲染引擎，但是由于視圖的刷新是整個widget刷新（理念就是任何都是widget），而原生方面（僅以iOS為例）刷新的只是label的文案，而不需要重新創建label。優化的方式是單獨建立每一個元素內容。由此引出，為啥官方文檔建議盡量使用無狀態的StatelessWidget，除非有必要在使用StatefulWidget。
后續我會給出RN，Flutter及iOS原生的內存及CPU使用率的圖以供參考。

編譯

Flutter 是支持原生頁面和 Flutter 頁面混合開發的，但是不支持原生組件在Flutter 中使用，原生端有 methodchannel 來支持 Flutter 對原生的一些API調用。
我們現在已有項目如果想介入Flutter怎么辦？集成現有iOS項目這個是官方給出了一些步驟，但我覺得不是正八經的告訴你怎么做，只是一個解決的辦法。需要你自己去把Flutter.framework及App.framework+info.plist導入已有工程，且需要你更改appdelegate為flutter的來做一次繼承。
在踩坑的時候發現鏈接器在編譯可執行文件的時候還會出現錯誤。。。后來我們大神說更新下package就好了，這是一個已知問題且已經修復。

總結

Flutter是一個很好的多平臺開發解決方案框架，可以幫助你節省很多開發時間。但就目前來看，雖然Flutter沒有使用JavaScript橋接器來與native連接，自有一個2D渲染引擎。但對于如今這個需要性能，用戶體驗的時代來說這并不能達到我們的要求。同時在編譯過程中又有各種的問題，最基礎的一件事就是當你需要打包的時候，你無法預測會發生什么錯誤導致打包失敗---這主要跟過長的操作過程有關。

• 所以當你是一個初學者要學習編程的時候，這個語言并不是一個能讓你節省時間的工具。
  如果你有一定的移動端開發基礎，你可以嘗試下使用flutter，尤其當你沒領略過響應式框架及鏈式語法的魅力。

• 如果你想對現有項目做集成可以看下閑魚的文章，他們已經接入了Flutter，并深度的解讀了可行性。
  如果說你的項目并沒有使用大量H5或者集成過其他Hybird框架，那么我不建議你們接入Flutter，這會讓你醉生夢死，尤其在你并沒有搞清楚Dart做了什么的時候。

Ps：還少一些Reactive的東西沒有整理完，后續會接著這篇發上來。

引用：
Flutter中文網
移動開發新利器 | 一文深入了解 Flutter 界面開發

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18385.html