本文主要大致介紹Flutter 整體框架台妆，簡(jiǎn)單粗略的使用，深度暫且還沒有胖翰。
用Dart，寫了個(gè)計(jì)算器的demo和列表拉下刷新請(qǐng)求demo切厘，基本上入門flutter使用萨咳，
源碼可在文章后查看。
目錄
- 一疫稿、關(guān)于Flutter
- 二培他、代碼大致解讀
- 三、混合開發(fā)
- 總結(jié)
一遗座、關(guān)于Flutter
1舀凛、flutter介紹
Flutter是一個(gè)使用Dart語言開發(fā)的跨平臺(tái)移動(dòng)UI框架,通過自建繪制引擎，能高性能途蒋、高保真地進(jìn)行Android和IOS開發(fā)猛遍，提供響應(yīng)式視圖而不需要JavaScript橋接器的移動(dòng)SDK，這就是與和React Native不一樣也是優(yōu)勢(shì)所在号坡，采用Dart的程序語言來編譯避免由JavaScript橋接器引起的性能問題懊烤，
開發(fā)語言：dart
- dart具有JIT&AOT雙重編譯執(zhí)行方式。這樣就能利用JIt進(jìn)行開發(fā)階段的hot reload開發(fā)宽堆，提升研發(fā)效率腌紧。同時(shí)在最終release版本中使用aot將dart代碼直接變成目標(biāo)平臺(tái)的指令集代碼。簡(jiǎn)單高效畜隶，最大限度保障了性能壁肋，最大限度減少包的大小，目前剛更新flutter preview2.0 對(duì)包的大小進(jìn)一步縮減籽慢。
- dart針對(duì)flutter中頻繁創(chuàng)建銷毀Widget的場(chǎng)景做了專門的gc優(yōu)化浸遗。通過分代無鎖垃圾回收器，將gc對(duì)性能的影響降至最低嗡综。
- dart語言在語法上面是類java的乙帮，易學(xué)易用，對(duì)于我們?cè)_發(fā)而言 學(xué)習(xí)JS极景，Dart語言更能被接受察净。（個(gè)人感覺）
2驾茴、環(huán)境配置
3、flutter特色--你可能會(huì)選它的幾個(gè)理由
- 熱加載： Flutter 最酷的功能之一氢卡，允許你像更新網(wǎng)頁一樣去實(shí)時(shí)的更新你的項(xiàng)目锈至。
- 界面UI風(fēng)格優(yōu)美： UI 全是代碼寫的而不是 XML。（組件上）并且有豐富的 (Material Design |Cupertino) 組件译秦，實(shí)現(xiàn)保持Android 和IOS風(fēng)格展示一致的效果峡捡，Android也可以以IOS風(fēng)格展示；（主題上） Android/iOS 的不同主題提供api直接判斷不同類型筑悴，繼而展示不同UI
- 組件足夠忻亲尽： Flutter 中的有個(gè)核心原則 — 組合優(yōu)先于繼承 他的每一個(gè)基礎(chǔ)組件非常細(xì)微，所以可以自己組裝創(chuàng)建各式各樣的組件
- 后援很強(qiáng)大：第三方庫不斷新增中阁吝，F(xiàn)lutter開發(fā)社區(qū)真的很大砚婆，而且非常活躍突勇，國內(nèi)閑魚已經(jīng)上線一版装盯，并作為flutter領(lǐng)導(dǎo)者，在前面不斷踩坑中甲馋；
4埂奈、美中不足
- 與RN相比，在性能上和局限性上定躏，可以勝之有余账磺，但是對(duì)于在線熱更新這個(gè)點(diǎn),目前沒有可行的預(yù)兆，除非把dart的編譯AOT編譯放在客戶端中共屈，顯然是不現(xiàn)實(shí)的绑谣；雖然，蘋果爸爸一直禁用app熱更新代碼的態(tài)度堅(jiān)決而明確拗引；這個(gè)不好評(píng)判了
- 代碼上:括號(hào)太多了借宵，各種嵌套,代碼看起來非常不友好;但是了解其之用法之后，將整個(gè)頁面分塊區(qū)分成一個(gè)小模塊獨(dú)立矾削，可讀性我個(gè)人感覺還ok壤玫；
- 畢竟flutter緊跟RN之后才誕生，目前社區(qū)哼凯，開源方面相對(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倉庫下的flutter package趁耗，以及sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package沉唠。
Engine使用C++實(shí)現(xiàn)，主要包括:Skia,Dart和Text苛败。Skia是開源的二維圖形庫满葛；提供了適用于多種軟硬件平臺(tái)的通用API。Dart部分主要包括:Dart Runtime罢屈，Garbage Collection(GC)嘀韧；Text即文本渲染，其渲染層次如下:衍生自minikin的libtxt庫(用于字體選擇缠捌，分隔行)
雖然深入下去的 暫時(shí)還不懂乳蛾，不難看出widget是我們所能涉及到開發(fā)的那一層。Flutter 的核心設(shè)計(jì)思想便是Everything’s a Widget 即一切即Widget鄙币。在flutter的世界里，包括views,view controllers,layouts等在內(nèi)的概念都建立在Widget之上蹂随。widget是flutter功能的抽象描述十嘿。所以掌握Flutter的基礎(chǔ)就是學(xué)會(huì)使用widget開始。
由widget展開的基礎(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、布局
1讳推、 布局拆封：
這是一個(gè)簡(jiǎn)單的計(jì)算器頁面顶籽，很明朗的將整個(gè)布局用Colunm豎向排列，Item中的Row再做橫向布局银觅，在Flutter 布局中礼饱，體現(xiàn)的是橫向與豎向的概念 約束方面也是以此為基礎(chǔ) MainAxisAlignment主軸約束（水平X軸）
CrossAxisAlignment副軸約束（豎直Y軸）。在這里說明下，F(xiàn)lutter沒有了原來Android的相對(duì)布局镊绪，但是用它已有的控件匀伏，能達(dá)到所有需要各種布局約束要求；
? 吐槽一點(diǎn)：剛學(xué)習(xí)這種布局方式镰吆，對(duì)于約束方法不熟悉帘撰，布局很頭疼，就像按照格子線去排放不同物品万皿，一點(diǎn)一點(diǎn)挪動(dòng)摧找，好在熱重載，改一行代碼就能看見效果
? 收藏一波各類約束布局的控件：SizedOverflowBox牢硅，OverflowBox蹬耘，LimitedBox，F(xiàn)ractionallySizedBox减余，SizedBox & ConstrainedBox综苔，F(xiàn)ittedBox，RotatedBox等等位岔；有些控件比較冷門需要自己去慢慢收藏如筛，沒用過基本不知道有這樣的都已經(jīng)幫你寫好的，能提高不少效率 抒抬；
[按鈕控件擴(kuò)展](https://zhuanlan.zhihu.com/p/38500192?" >杨刨，)
2、State生命周期：
? flutter和RN一致擦剑，采用響應(yīng)式視圖妖胀，維護(hù)了一個(gè)狀態(tài)機(jī)，只更新改變的最小區(qū)域界面 惠勒；
? 它有兩類widght：
StatelessWidget（無狀態(tài)）:UI純展示作用赚抡，無交互以及UI變化，例如：提示語等纠屋；
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)建灼舍，但還沒有準(zhǔn)備構(gòu)建時(shí)吼和，State.didChangeDependencies在這個(gè)時(shí)候會(huì)被調(diào)用；
- ready：State對(duì)象已經(jīng)準(zhǔn)備好了構(gòu)建骑素，State.dispose沒有被調(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>類型邦邦，即其返回值未來是一個(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 后面的語句先順序執(zhí)行
三蛋欣、混合開發(fā)
針對(duì)我們目前公版上或者分支上的項(xiàng)目而言拉盾，不可能將整個(gè)項(xiàng)目移植成Flutter，顯然是不現(xiàn)實(shí)的豁状。如若是一個(gè)新的小項(xiàng)目，我覺得認(rèn)為這個(gè)是可以是個(gè)新的嘗試倒得，新的技術(shù)氛圍泻红，也可以衍生或者接觸其他的更多領(lǐng)域，有利于增加團(tuán)隊(duì)氛圍霞掺。
當(dāng)然還有一個(gè)嘗試：像之前RN一樣谊路，獨(dú)立一些模塊功能使用flutter開發(fā)，將這些獨(dú)立模塊使用類似SDK形式菩彬，引入我們的項(xiàng)目中缠劝，開放出接口給Native調(diào)用；
問題：由Flutter目錄再分別包含Native工程的目錄（即ios和android兩個(gè)目錄）組成骗灶。默認(rèn)情況下惨恭，引入了Flutter的Native工程無法脫離父目錄進(jìn)行獨(dú)立構(gòu)建和運(yùn)行，因?yàn)樗鼤?huì)反向依賴于Flutter相關(guān)的庫和資源
閑魚針對(duì)項(xiàng)目混合開發(fā)改造實(shí)踐
總結(jié)
Dart語言耙旦，運(yùn)用起來脱羡，函數(shù)思想與kotlin類似，Dart語言上的特性，kotlin都有锉罐，唯一算的上特點(diǎn)就是Dart編譯速度快了帆竹。面對(duì)對(duì)象的思想，和java如出一轍脓规，我學(xué)起來倒也不是很吃力栽连。對(duì)于編寫代碼來講，槽點(diǎn)就是他的代碼風(fēng)格侨舆，括號(hào)嵌套太多秒紧，每個(gè)組件后，以“态罪，”結(jié)尾噩茄，這樣格式化稍微好一些；
Flutter官方吹的很大复颈，說它是革命性的绩聘，也有一定道理。但是我覺得RN對(duì)于熟悉web開發(fā)的人來說耗啦，是更好的選擇凿菩。但是對(duì)于純native開發(fā)的移動(dòng)開發(fā)人員，直接學(xué)習(xí)Flutter會(huì)更好帜讲，F(xiàn)lutter也比較適合本來就是做native開發(fā)的人
目前衅谷，F(xiàn)lutter還是處于beta版本，盡管如此似将，現(xiàn)在閑魚也已經(jīng)作為大頭获黔，在前面領(lǐng)路了。作為Google親兒子在验，相信Flutter 不會(huì)像RN一樣玷氏，路途那么坎坷
官方資源
2腋舌、Flutter快速入門
3盏触、Flutter—API 文檔
4、Githu
b
6赞辩、Twitter
7、Gitter
項(xiàng)目demo：flutter_demo：下拉請(qǐng)求刷新|計(jì)算器
