Flutter簡(jiǎn)介

2018年2月27日，在2018世界移動(dòng)大會(huì)上，Google 發(fā)布了Flutter的第一個(gè)Beta版本。Flutter是 Google 用以幫助開發(fā)者在iOS和Android兩個(gè)平臺(tái)開發(fā)高質(zhì)量原生應(yīng)用的全新移動(dòng)UI框架,類似于React Native、Weex可以實(shí)現(xiàn)跨平臺(tái)開發(fā)。

Flutter特點(diǎn)

熱重載（Hot Reload）利用Android Studio直接一個(gè)Ctrl+S就可以保存并重載，模擬器立馬就可以看見效果，這一效果其實(shí)有點(diǎn)類似Android Studio的Instant Run借助可移植的GPU加速的渲染引擎以及高性能本地代碼運(yùn)行時(shí)以達(dá)到跨平臺(tái)設(shè)備的高質(zhì)量用戶體驗(yàn)可擴(kuò)展性很強(qiáng)：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風(fēng)格的控件，可自由擴(kuò)展控件不受手機(jī)平臺(tái)控件的限制

Flutter入門

做為一個(gè)iOS開發(fā)者個(gè)人認(rèn)為Flutter更適合學(xué)習(xí)，因?yàn)槠淙腴T較快，相對(duì)Weex、React-Native更快入門，因?yàn)楹笳邇蓚€(gè)對(duì)前端知識(shí)要求較高，而我一個(gè)iOS開發(fā)者有點(diǎn)懵逼。環(huán)境搭建：Flutter環(huán)境搭建根據(jù)命令行拉個(gè)文件到本機(jī) 再進(jìn)行命令安裝配置啥的，跟著一步步走即可。開發(fā)工具：我使用的Android Studio 非常方便，當(dāng)然你也可以用VSCode 附圖

image

Android Studio很Nice，但是我的小Mac Air有點(diǎn)受不了，每次一運(yùn)行只能關(guān)掉其他應(yīng)用滾燙的電腦。所以你可以選擇VSCode，相對(duì)消耗較低。完美運(yùn)行。

如何構(gòu)建一個(gè)App

image

根據(jù)提示填入AppName，存儲(chǔ)地兒及包名。了解一下Flutter的入口，iOS的話即為Appdelegate.m文件中，切換RootViewController即可，在這里也可以同樣理解，main.dart相當(dāng)于Appdelegate.m，也可以寫一個(gè)RootViewController，相當(dāng)于這里的RootIndex

image

RootIndex實(shí)現(xiàn)跟iOS差不多的思想，包含其他幾個(gè)頁(yè)面頭文件，然后設(shè)置一下即可，就可以實(shí)現(xiàn)最基本的一個(gè)App了，然后接著就是實(shí)現(xiàn)UI即可。

image

到此，一個(gè)空的App已經(jīng)可以運(yùn)行了。

---

關(guān)于UI搭建

在iOS中很簡(jiǎn)單粗暴，直接設(shè)置控件的絕對(duì)位置，x，y的位置，寬高。還可以利用其他第三方庫(kù)類似Mansoy來(lái)進(jìn)行自適應(yīng)的布局，也非常方便。但是在Flutter并不是這樣。首先貼個(gè)布局的鏈接Flutter布局。咱們先看個(gè)簡(jiǎn)單的布局，在iOS里新建個(gè)UITableViewCell，咔咔的幾下就寫完了，但是在Flutter可能需要換種思路去實(shí)現(xiàn)了

image

首先要確認(rèn)布局的方向，Column從上到下的布局，Row從左到右的布局，Container相當(dāng)于iOS的類似UIView的控件，可以往里加子控件，例如輸入框，文本，圖片等。右邊的代碼為實(shí)現(xiàn)的結(jié)構(gòu)。其中margin就是設(shè)置上下左右相對(duì)父控件的位置的。

Fluuter-TabBar

在iOS中控件中并沒(méi)有這個(gè)，需要自己實(shí)現(xiàn)。iOS有第三方庫(kù)類似TopTabBar。

image

在AppBar中實(shí)現(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, ), ) 

實(shí)現(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 =="簡(jiǎn)友圈"){ 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(), ), 

這里實(shí)現(xiàn)的一個(gè)ListView。

最后附上Github上的Demo的地址：Demo傳送門
再推薦兩個(gè)網(wǎng)站
Flutter中文網(wǎng)
Flutter社區(qū)中文資源
如有不正確的地方幫忙指出，謝謝。

本頁(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://jstctz.cn/18052.html