前言

???????隨著flutter1.0版本的發布，相信大多數移動開發者對flutter都會有很大的熱情，畢竟這是谷歌爸爸推廣的，現在學習的話肯定對以后的工作會大有幫助，那么今天我們就來學習flutter。

編碼

???????今天我們就來看看怎么用flutter來搭一個APP開發的架子，首先需要知道的是在flutter中有兩種Widget，一種是StatelessWidget，繼承這個類的widget在程序初始化的時候只走一次生命周期，所以比較適合顯示靜態的頁面，而如果你的頁面需要交互的話則是需要繼承StatefulWidget。說了那么多，咱們還是先上代碼看看吧（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("首頁"),icon:Icon(Icons.home),backgroundColor: Config.colorPrimary ), BottomNavigationBarItem(title: Text("備忘錄"),icon: Icon(Icons.border_color),backgroundColor: Config.colorPrimary), BottomNavigationBarItem(title: Text("知識"),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); } } 

???????這個類叫AppPage ，因為需要交互所以繼承了StatefulWidget，在手機上顯示的效果如下：

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

???????2.我們需要定義三個tab頁面，因為目前的flutter還是有些bug的，因為在tab切換的時候頁面的數據會重新加載，為了解決這種bug需要加上SingleTickerProviderStateMixin。然后需要定義三個tab按鈕

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

???????Scaffold實現了基本的Material 布局，在Scaffold里面可以定義appbar,body等內容，至于代表啥看名字就知道了，可以看到body里面是一個PageView（類似于android中的ViewPage），在PageView的children里面傳入了Home(),Memo(),knowledge()三個頁面分別代表上圖中的首頁，備忘錄，知識三個頁面。bottomNavigationBar代表底部的三個tab,里面參數的意思說一下，items代表具體的tabbar，就是我們之前在上面定義的BottomNavigationBarItem列表，currentIndex表示當前頁是第幾頁，onTap是具有水波紋效果的按鈕點擊事件。好了，第一篇關于flutter的文章就簡單的寫到這里了，有什么問題可以留言，大家一起開始學習flutter吧~

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