<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>

      歡迎您光臨深圳塔燈網絡科技有限公司!
      電話圖標 余先生:13699882642

      網站百科

      為您解碼網站建設的點點滴滴

      flutter學習第一彈

      發表日期:2018-12 文章編輯:小燈 瀏覽次數:1941

      前言

      ???????隨著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,在手機上顯示的效果如下:


      首頁.png

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


      image.png

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


      image.png

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

      image.png

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

      公眾號.jpg

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

      相關APP開發
       八年  行業經驗

      多一份參考,總有益處

      聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

      咨詢相關問題或預約面談,可以通過以下方式與我們聯系

      業務熱線:余經理:13699882642

      Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

      国产成人精品综合在线观看