4、美中不足

1. 與RN相比，在性能上和局限性上，可以勝之有余，但是對(duì)于在線熱更新這個(gè)點(diǎn),目前沒(méi)有可行的預(yù)兆，除非把dart的編譯AOT編譯放在客戶端中，顯然是不現(xiàn)實(shí)的；雖然，蘋果爸爸一直禁用app熱更新代碼的態(tài)度堅(jiān)決而明確；這個(gè)不好評(píng)判了
2. 代碼上:括號(hào)太多了，各種嵌套,代碼看起來(lái)非常不友好;但是了解其之用法之后，將整個(gè)頁(yè)面分塊區(qū)分成一個(gè)小模塊獨(dú)立，可讀性我個(gè)人感覺(jué)還ok；
3. 畢竟flutter緊跟RN之后才誕生，目前社區(qū)，開(kāi)源方面相對(duì)于RN，還不夠完善；

5、flutter--widget

上述圖中可以看到：

Framework使用dart實(shí)現(xiàn)，包括Material Design風(fēng)格的Widget,Cupertino(針對(duì)iOS)風(fēng)格的Widgets，文本/圖片/按鈕等基礎(chǔ)Widgets，渲染，動(dòng)畫，手勢(shì)等。此部分的核心代碼是:flutter倉(cāng)庫(kù)下的flutter package，以及sky_engine倉(cāng)庫(kù)下的io,async,ui(dart:ui庫(kù)提供了Flutter框架和引擎之間的接口)等package。

Engine使用C++實(shí)現(xiàn)，主要包括:Skia,Dart和Text。Skia是開(kāi)源的二維圖形庫(kù)；提供了適用于多種軟硬件平臺(tái)的通用API。Dart部分主要包括:Dart Runtime，Garbage Collection(GC)；Text即文本渲染，其渲染層次如下:衍生自minikin的libtxt庫(kù)(用于字體選擇，分隔行)

雖然深入下去的 暫時(shí)還不懂，不難看出widget是我們所能涉及到開(kāi)發(fā)的那一層。Flutter 的核心設(shè)計(jì)思想便是Everything’s a Widget 即一切即Widget。在flutter的世界里，包括views,view controllers,layouts等在內(nèi)的概念都建立在Widget之上。widget是flutter功能的抽象描述。所以掌握Flutter的基礎(chǔ)就是學(xué)會(huì)使用widget開(kāi)始。

由widget展開(kāi)的基礎(chǔ)組件，布局，交互等；

二、代碼大致解讀

1、按照慣例 --- Hello World

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
} 

一個(gè) layout 是由嵌套的組件（Widgets）構(gòu)建的， 核心 Widget 是 MaterialApp （這是整個(gè)的應(yīng)用程序）， 然后我們有 Scaffold （這是我們主界面的 layout 結(jié)構(gòu)），再然后是 AppBar （就像 Android Toolbar） 和 一些 Container 作為 body，在 body 內(nèi)部，我們可以放置我們 layout 組件 —?Texts, Buttons 等等。

2、布局

fef361039bdd30af7dd5a4cab38fbf8.png

1、 布局拆封：

這是一個(gè)簡(jiǎn)單的計(jì)算器頁(yè)面，很明朗的將整個(gè)布局用Colunm豎向排列，Item中的Row再做橫向布局，在Flutter 布局中，體現(xiàn)的是橫向與豎向的概念 約束方面也是以此為基礎(chǔ) MainAxisAlignment主軸約束（水平X軸）

CrossAxisAlignment副軸約束（豎直Y軸）。在這里說(shuō)明下，F(xiàn)lutter沒(méi)有了原來(lái)Android的相對(duì)布局，但是用它已有的控件，能達(dá)到所有需要各種布局約束要求；

? 吐槽一點(diǎn)：剛學(xué)習(xí)這種布局方式，對(duì)于約束方法不熟悉，布局很頭疼，就像按照格子線去排放不同物品，一點(diǎn)一點(diǎn)挪動(dòng)，好在熱重載，改一行代碼就能看見(jiàn)效果

? 收藏一波各類約束布局的控件：SizedOverflowBox，OverflowBox，LimitedBox，F(xiàn)ractionallySizedBox，SizedBox & ConstrainedBox，F(xiàn)ittedBox，RotatedBox等等；有些控件比較冷門需要自己去慢慢收藏，沒(méi)用過(guò)基本不知道有這樣的都已經(jīng)幫你寫好的，能提高不少效率 ；

[按鈕控件擴(kuò)展](https://zhuanlan.zhihu.com/p/38500192?" >，)

2、State生命周期：

? flutter和RN一致，采用響應(yīng)式視圖，維護(hù)了一個(gè)狀態(tài)機(jī)，只更新改變的最小區(qū)域界面 ；
? 它有兩類widght：

StatelessWidget（無(wú)狀態(tài)）:UI純展示作用，無(wú)交互以及UI變化，例如：提示語(yǔ)等；

StatefulWidget（有狀態(tài)）:程序運(yùn)行中，UI發(fā)生變化的，以及用戶交互的；

State的生命周期有四種狀態(tài)：

• created：當(dāng)State對(duì)象被創(chuàng)建時(shí)候，State.initState方法會(huì)被調(diào)用；
• initialized：當(dāng)State對(duì)象被創(chuàng)建，但還沒(méi)有準(zhǔn)備構(gòu)建時(shí)，State.didChangeDependencies在這個(gè)時(shí)候會(huì)被調(diào)用；
• ready：State對(duì)象已經(jīng)準(zhǔn)備好了構(gòu)建，State.dispose沒(méi)有被調(diào)用的時(shí)候；
• defunct：State.dispose被調(diào)用后，State對(duì)象不能夠被構(gòu)建。

調(diào)用setState方法后，更新視圖，數(shù)據(jù)改變或者UI需要發(fā)生變化，需要再setState方法里對(duì)數(shù)據(jù)源進(jìn)行更新，然后布局會(huì)用新的數(shù)據(jù)源重新build，

3、異步-- 網(wǎng)絡(luò)請(qǐng)求

常用的async await Future搭配

//HTTP的get請(qǐng)求返回值為Future<String>類型，即其返回值未來(lái)是一個(gè)String類型的值
getData() async {    //async關(guān)鍵字聲明該函數(shù)內(nèi)部有代碼需要延遲執(zhí)行
  return await http.get(URL); //await關(guān)鍵字聲明運(yùn)算為延遲執(zhí)行，然后return運(yùn)算結(jié)果
}

這時(shí)候 如果直接執(zhí)行 ：

  String data = getData();

就直接會(huì)報(bào)錯(cuò)

因?yàn)?code>data是String類型，而函數(shù)getData()是一個(gè)異步操作函數(shù)，其返回值是一個(gè)await延遲執(zhí)行的結(jié)果。在Dart中，有await標(biāo)記的運(yùn)算，其結(jié)果值都是一個(gè)Future對(duì)象，Future不是String類型，所以就報(bào)錯(cuò)了

可以這么實(shí)現(xiàn)：

getData().then(data){
   String _data = data;
}

Future 中thenAPI，作用為getData()異步執(zhí)行完成后，在調(diào)用then方法，并且與Future 后面的語(yǔ)句先順序執(zhí)行

三、混合開(kāi)發(fā)

針對(duì)我們目前公版上或者分支上的項(xiàng)目而言，不可能將整個(gè)項(xiàng)目移植成Flutter，顯然是不現(xiàn)實(shí)的。如若是一個(gè)新的小項(xiàng)目，我覺(jué)得認(rèn)為這個(gè)是可以是個(gè)新的嘗試，新的技術(shù)氛圍，也可以衍生或者接觸其他的更多領(lǐng)域，有利于增加團(tuán)隊(duì)氛圍。

當(dāng)然還有一個(gè)嘗試：像之前RN一樣，獨(dú)立一些模塊功能使用flutter開(kāi)發(fā)，將這些獨(dú)立模塊使用類似SDK形式，引入我們的項(xiàng)目中，開(kāi)放出接口給Native調(diào)用；

問(wèn)題：由Flutter目錄再分別包含Native工程的目錄（即ios和android兩個(gè)目錄）組成。默認(rèn)情況下，引入了Flutter的Native工程無(wú)法脫離父目錄進(jìn)行獨(dú)立構(gòu)建和運(yùn)行，因?yàn)樗鼤?huì)反向依賴于Flutter相關(guān)的庫(kù)和資源

閑魚(yú)針對(duì)項(xiàng)目混合開(kāi)發(fā)改造實(shí)踐

總結(jié)

Dart語(yǔ)言，運(yùn)用起來(lái)，函數(shù)思想與kotlin類似，Dart語(yǔ)言上的特性，kotlin都有，唯一算的上特點(diǎn)就是Dart編譯速度快了。面對(duì)對(duì)象的思想，和java如出一轍，我學(xué)起來(lái)倒也不是很吃力。對(duì)于編寫代碼來(lái)講，槽點(diǎn)就是他的代碼風(fēng)格，括號(hào)嵌套太多，每個(gè)組件后，以“，”結(jié)尾，這樣格式化稍微好一些；

Flutter官方吹的很大，說(shuō)它是革命性的，也有一定道理。但是我覺(jué)得RN對(duì)于熟悉web開(kāi)發(fā)的人來(lái)說(shuō)，是更好的選擇。但是對(duì)于純native開(kāi)發(fā)的移動(dòng)開(kāi)發(fā)人員，直接學(xué)習(xí)Flutter會(huì)更好，F(xiàn)lutter也比較適合本來(lái)就是做native開(kāi)發(fā)的人
目前，F(xiàn)lutter還是處于beta版本，盡管如此，現(xiàn)在閑魚(yú)也已經(jīng)作為大頭，在前面領(lǐng)路了。作為Google親兒子，相信Flutter 不會(huì)像RN一樣，路途那么坎坷

官方資源

1、Flutter官網(wǎng)

2、Flutter快速入門

3、Flutter—API 文檔

4、Githu

1539509311(1).jpg

5、Google+網(wǎng)上論壇

6、Twitter

7、Gitter

8、Flutter技術(shù)周報(bào)

項(xiàng)目demo：flutter_demo：下拉請(qǐng)求刷新|計(jì)算器