前言

???????隨著flutter1.0版本的發(fā)布，相信大多數(shù)移動(dòng)開(kāi)發(fā)者對(duì)flutter都會(huì)有很大的熱情，畢竟這是谷歌爸爸推廣的，現(xiàn)在學(xué)習(xí)的話肯定對(duì)以后的工作會(huì)大有幫助，那么今天我們就來(lái)學(xué)習(xí)flutter。

編碼

???????今天我們就來(lái)看看怎么用flutter來(lái)搭一個(gè)APP開(kāi)發(fā)的架子，首先需要知道的是在flutter中有兩種Widget，一種是StatelessWidget，繼承這個(gè)類(lèi)的widget在程序初始化的時(shí)候只走一次生命周期，所以比較適合顯示靜態(tài)的頁(yè)面，而如果你的頁(yè)面需要交互的話則是需要繼承StatefulWidget。說(shuō)了那么多，咱們還是先上代碼看看吧（talk is cheap, show me the code~）

class AppPage extends StatefulWidget{ @override State<StatefulWidget> createState() { return _AppPageState(); } }class _AppPageState extends State<AppPage> with SingleTickerProviderStateMixin{ int _page = 0; PageController _pageController; final List<BottomNavigationBarItem> listBar = [BottomNavigationBarItem(title: Text("首頁(yè)"),icon:Icon(Icons.home),backgroundColor: Config.colorPrimary ), BottomNavigationBarItem(title: Text("備忘錄"),icon: Icon(Icons.border_color),backgroundColor: Config.colorPrimary), BottomNavigationBarItem(title: Text("知識(shí)"),icon: Icon(Icons.reorder),backgroundColor: Config.colorPrimary),];@override void initState() { _pageController = PageController(initialPage: this._page); }@override void dispose() { _pageController.dispose(); super.dispose(); }@override Widget build(BuildContext context) { return Scaffold( body: PageView( physics: NeverScrollableScrollPhysics(), children: <Widget>[ Home(), Memo(), knowledge() ], onPageChanged: _onPageChanged, controller: _pageController, ), bottomNavigationBar: BottomNavigationBar( items: listBar, currentIndex: _page, fixedColor: Config.colorPrimary, type: BottomNavigationBarType.fixed, onTap: _onTap,), ); }void _onPageChanged(int page){ setState(() { this._page = page; }); }void _onTap(int index){ _pageController.animateToPage(index, duration: const Duration(milliseconds: 500), curve: Curves.ease); } } 

???????這個(gè)類(lèi)叫AppPage ，因?yàn)樾枰换ニ岳^承了StatefulWidget，在手機(jī)上顯示的效果如下：

首頁(yè).png

???????可以看到這其實(shí)就是一個(gè)APP的首頁(yè)，那么上面的代碼具體都有什么功能呢，且聽(tīng)我一一道來(lái)：
???????1.首先我們需要定義個(gè)頁(yè)面AppPage（名字隨便取） 繼承自StatefulWidget，而繼承StatefulWidget的類(lèi)都需要的返回一個(gè)新的繼承State的類(lèi)，可能聽(tīng)起來(lái)有點(diǎn)繞口，就如下圖所示，這種寫(xiě)法是固定的，凡是繼承自StatefulWidget的widget都這樣寫(xiě)就行了。

image.png

???????2.我們需要定義三個(gè)tab頁(yè)面，因?yàn)槟壳暗膄lutter還是有些bug的，因?yàn)樵趖ab切換的時(shí)候頁(yè)面的數(shù)據(jù)會(huì)重新加載，為了解決這種bug需要加上SingleTickerProviderStateMixin。然后需要定義三個(gè)tab按鈕

image.png

???????可以看到每個(gè)tab按鈕都是一個(gè)BottomNavigationBarItem，初始化BottomNavigationBarItem的方法也很簡(jiǎn)單，就是把tab所需要展示的icon和title傳給BottomNavigationBarItem就行了。定義好了tab按鈕就需要把它放在頁(yè)面顯示出來(lái)了，那么flutter是怎樣展示頁(yè)面的呢？

image.png

???????Scaffold實(shí)現(xiàn)了基本的Material 布局，在Scaffold里面可以定義appbar,body等內(nèi)容，至于代表啥看名字就知道了，可以看到body里面是一個(gè)PageView（類(lèi)似于android中的ViewPage），在PageView的children里面?zhèn)魅肓薍ome(),Memo(),knowledge()三個(gè)頁(yè)面分別代表上圖中的首頁(yè)，備忘錄，知識(shí)三個(gè)頁(yè)面。bottomNavigationBar代表底部的三個(gè)tab,里面參數(shù)的意思說(shuō)一下，items代表具體的tabbar，就是我們之前在上面定義的BottomNavigationBarItem列表，currentIndex表示當(dāng)前頁(yè)是第幾頁(yè)，onTap是具有水波紋效果的按鈕點(diǎn)擊事件。好了，第一篇關(guān)于flutter的文章就簡(jiǎn)單的寫(xiě)到這里了，有什么問(wèn)題可以留言，大家一起開(kāi)始學(xué)習(xí)flutter吧~

公眾號(hào).jpg

???????同時(shí)，歡迎大家關(guān)注我公眾號(hào)，謝了?。?！

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(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/17677.html