Flutter簡介

2018年2月27日，在2018世界移動大會上，Google 發布了Flutter的第一個Beta版本。Flutter是 Google 用以幫助開發者在iOS和Android兩個平臺開發高質量原生應用的全新移動UI框架,類似于React Native、Weex可以實現跨平臺開發。

Flutter特點

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

Flutter入門

做為一個iOS開發者個人認為Flutter更適合學習，因為其入門較快，相對Weex、React-Native更快入門，因為后者兩個對前端知識要求較高，而我一個iOS開發者有點懵逼。環境搭建：Flutter環境搭建根據命令行拉個文件到本機 再進行命令安裝配置啥的，跟著一步步走即可。開發工具：我使用的Android Studio 非常方便，當然你也可以用VSCode 附圖

image

Android Studio很Nice，但是我的小Mac Air有點受不了，每次一運行只能關掉其他應用滾燙的電腦。所以你可以選擇VSCode，相對消耗較低。完美運行。

如何構建一個App

image

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

image

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

image

到此，一個空的App已經可以運行了。

---

關于UI搭建

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

image

首先要確認布局的方向，Column從上到下的布局，Row從左到右的布局，Container相當于iOS的類似UIView的控件，可以往里加子控件，例如輸入框，文本，圖片等。右邊的代碼為實現的結構。其中margin就是設置上下左右相對父控件的位置的。

Fluuter-TabBar

在iOS中控件中并沒有這個，需要自己實現。iOS有第三方庫類似TopTabBar。

image

在AppBar中實現，在導航欄底部。

 appBar:new AppBar( title:new Text('關注', 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, ), ) 

實現視圖

body:new TabBarView( controller:_tabController, children:myTabs.map((Tab tab) { if(tab.text =="全部關注"){ 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(), ), 

這里實現的一個ListView。

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/18052.html