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

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

Flutter是什么

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

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

Flutter與其他Hybird框?架的不同

首先要說的就是他的構(gòu)建方式，?有說到它屬于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的時候默認的代碼。

效果圖

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

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

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

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

 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：其他還有的會繼續(xù)補充，如果有你發(fā)現(xiàn)的新問題隨時歡迎留言~

探討

為什么使用flutter

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

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

響應式框架

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

Flutter框架

下面這個是組合型視圖：

視圖樹

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

initState()： state create之后被insert到tree時調(diào)用的 didUpdateWidget(newWidget)：祖先節(jié)點rebuild widget時調(diào)用 deactivate()：widget被remove的時候調(diào)用，一個widget從tree中remove掉，可以在dispose接口被調(diào)用前，重新instert到一個新tree中 didChangeDependencies()： 初始化時，在initState()之后立刻調(diào)用 當依賴的InheritedWidget rebuild,會觸發(fā)此接口被調(diào)用 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徹底銷毀時調(diào)用 reassemble()： hot reload調(diào)用 

性能

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

編譯

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

總結(jié)

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

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

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

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

引用：
Flutter中文網(wǎng)
移動開發(fā)新利器 | 一文深入了解 Flutter 界面開發(fā)

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