Flutter簡介
2018年2月27日，在2018世界移動大會上陨晶，Google 發(fā)布了Flutter的第一個Beta版本宵睦。Flutter是 Google 用以幫助開發(fā)者在iOS和Android兩個平臺開發(fā)高質(zhì)量原生應(yīng)用的全新移動UI框架,類似于React Native檩小、Weex可以實現(xiàn)跨平臺開發(fā)罩阵。
Flutter特點
熱重載（Hot Reload）利用Android Studio直接一個Ctrl+S就可以保存并重載，模擬器立馬就可以看見效果序臂，這一效果其實有點類似Android Studio的Instant Run借助可移植的GPU加速的渲染引擎以及高性能本地代碼運行時以達(dá)到跨平臺設(shè)備的高質(zhì)量用戶體驗可擴展性很強：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風(fēng)格的控件蚌卤，可自由擴展控件不受手機平臺控件的限制
Flutter入門
做為一個iOS開發(fā)者個人認(rèn)為Flutter更適合學(xué)習(xí)，因為其入門較快奥秆，相對Weex逊彭、React-Native更快入門，因為后者兩個對前端知識要求較高构订，而我一個iOS開發(fā)者有點懵逼侮叮。環(huán)境搭建：Flutter環(huán)境搭建 根據(jù)命令行拉個文件到本機 再進行命令安裝配置啥的，跟著一步步走即可悼瘾。開發(fā)工具：我使用的Android Studio 非常方便签赃，當(dāng)然你也可以用VSCode 附圖
Android Studio很Nice谷异，但是我的小Mac Air有點受不了，每次一運行只能關(guān)掉其他應(yīng)用滾燙的電腦锦聊。所以你可以選擇VSCode，相對消耗較低箩绍。完美運行孔庭。
如何構(gòu)建一個App
根據(jù)提示填入AppName，存儲地兒及包名材蛛。了解一下Flutter的入口圆到，iOS的話即為Appdelegate.m文件中，切換RootViewController即可卑吭，在這里也可以同樣理解芽淡，main.dart相當(dāng)于Appdelegate.m，也可以寫一個RootViewController豆赏，相當(dāng)于這里的RootIndex
RootIndex實現(xiàn)跟iOS差不多的思想挣菲，包含其他幾個頁面頭文件，然后設(shè)置一下即可掷邦，就可以實現(xiàn)最基本的一個App了白胀，然后接著就是實現(xiàn)UI即可。
到此抚岗，一個空的App已經(jīng)可以運行了或杠。
關(guān)于UI搭建
在iOS中很簡單粗暴，直接設(shè)置控件的絕對位置宣蔚，x向抢，y的位置，寬高胚委。還可以利用其他第三方庫類似Mansoy來進行自適應(yīng)的布局挟鸠，也非常方便。但是在Flutter并不是這樣篷扩。首先貼個布局的鏈接Flutter布局兄猩。咱們先看個簡單的布局，在iOS里新建個UITableViewCell鉴未，咔咔的幾下就寫完了枢冤，但是在Flutter可能需要換種思路去實現(xiàn)了
首先要確認(rèn)布局的方向，Column從上到下的布局铜秆，Row從左到右的布局淹真，Container相當(dāng)于iOS的類似UIView的控件，可以往里加子控件连茧，例如輸入框核蘸，文本巍糯，圖片等。右邊的代碼為實現(xiàn)的結(jié)構(gòu)客扎。其中margin就是設(shè)置上下左右相對父控件的位置的祟峦。
Fluuter-TabBar
在iOS中控件中并沒有這個，需要自己實現(xiàn)徙鱼。iOS有第三方庫類似TopTabBar宅楞。
在AppBar中實現(xiàn)，在導(dǎo)航欄底部袱吆。
appBar:new AppBar(
title:new Text('關(guān)注', style:new TextStyle(fontSize:17.0, color: Colors.black),),
centerTitle:false,
backgroundColor: Colors.white,
actions: [
new Row(
children: [
new Container(
child:new FlatButton(onPressed: (){}, child:new Icon(Icons.people)),
width:44.0,
),
new Container(
child:new FlatButton(onPressed: (){}, child:new Icon(Icons.search)),
width:64.0,
),
],
)
],
bottom:new TabBar(
tabs:myTabs,
unselectedLabelColor: Colors.grey,
labelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.tab,
// indicatorWeight: 15.0,
indicator:new ShapeDecoration(
color: Colors.orange,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
),
controller:_tabController,
isScrollable:true,
),
)
實現(xiàn)視圖
body:new TabBarView(
controller:_tabController,
children:myTabs.map((Tab tab) {
if(tab.text =="全部關(guān)注"){
return new Container(
child:new ListView.builder(
itemCount:likeLists.length,
itemBuilder: buildCellItem,
),
);
}else if(tab.text =="簡友圈"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="專題"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="作者"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="連載"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="文集"){
return new Center(child:new Text(tab.text));
}
return new Center(child:new Text(tab.text));
}).toList(),
),
這里實現(xiàn)的一個ListView厌衙。
最后附上Github上的Demo的地址：Demo傳送門
再推薦兩個網(wǎng)站
Flutter中文網(wǎng)
Flutter社區(qū)中文資源
如有不正確的地方幫忙指出，謝謝绞绒。
