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

聽(tīng)我們大神說(shuō)這個(gè)東西有搞頭，之前有做過(guò)一段時(shí)間ionic，了解過(guò)一些mobilephone的東西。所以最近開(kāi)始搗鼓下flutter。這里記錄一下作為一個(gè)iOS Developer的使用感受和一些心得體會(huì)。

Flutter是什么

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

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

Flutter與其他Hybird框?架的不同

首先要說(shuō)的就是他的構(gòu)建方式，?有說(shuō)到它屬于Dart的一個(gè)SDK。我覺(jué)得Flutter與其他跨平臺(tái)的最大不同之處是它自建了一個(gè)2D渲染引擎，在性能上要比其他基于js的框架好上很多，后面會(huì)講到具體性能部分。
代碼風(fēng)格和java比較接近，個(gè)人感覺(jué)和前端標(biāo)簽也很像，有人說(shuō)喜歡XML布局的對(duì)于Dart會(huì)比較難受。它的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. ); } } 

上面這個(gè)是初始化flutter的時(shí)候默認(rèn)的代碼。

效果圖

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

使用時(shí)遇到的坑和一些提醒

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

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

探討

為什么使用flutter

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

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

響應(yīng)式框架

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

Flutter框架

下面這個(gè)是組合型視圖：

視圖樹(shù)

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

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

性能

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

編譯

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

總結(jié)

Flutter是一個(gè)很好的多平臺(tái)開(kāi)發(fā)解決方案框架，可以幫助你節(jié)省很多開(kāi)發(fā)時(shí)間。但就目前來(lái)看，雖然Flutter沒(méi)有使用JavaScript橋接器來(lái)與native連接，自有一個(gè)2D渲染引擎。但對(duì)于如今這個(gè)需要性能，用戶體驗(yàn)的時(shí)代來(lái)說(shuō)這并不能達(dá)到我們的要求。同時(shí)在編譯過(guò)程中又有各種的問(wèn)題，最基礎(chǔ)的一件事就是當(dāng)你需要打包的時(shí)候，你無(wú)法預(yù)測(cè)會(huì)發(fā)生什么錯(cuò)誤導(dǎo)致打包失敗---這主要跟過(guò)長(zhǎng)的操作過(guò)程有關(guān)。

• 所以當(dāng)你是一個(gè)初學(xué)者要學(xué)習(xí)編程的時(shí)候，這個(gè)語(yǔ)言并不是一個(gè)能讓你節(jié)省時(shí)間的工具。
  如果你有一定的移動(dòng)端開(kāi)發(fā)基礎(chǔ)，你可以嘗試下使用flutter，尤其當(dāng)你沒(méi)領(lǐng)略過(guò)響應(yīng)式框架及鏈?zhǔn)秸Z(yǔ)法的魅力。

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

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

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

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