發表日期:2018-11 文章編輯:小燈 瀏覽次數:2441
之前寫過一篇Flutter介紹的文章,然后因為一些其他事情停了好久沒寫了。這人一懶下來就懶成習慣了哈哈。這次的文章主要是介紹用Flutter實現一個app常用的底部tab欄,類似于安卓里面的BottomNaivigationView。有三個頁面可以點擊切換這樣子。
FirstTab里面的代碼:
import 'package:flutter/material.dart';class FirstTab extends StatefulWidget { @override _FirstTabState createState() => _FirstTabState(); }class _FirstTabState extends State<FirstTab> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('第一個界面'), ), body: new Center( child: new Text('first'), ), ); } }
就是一個簡單的界面,一個標題欄文本,和一個居中的文本。第二個和第三個界面也都是一樣類似的,文本不同而已。這里教大家一個小技巧,在AndroidStudio里面創建Widget的快捷鍵。
stful ===> 創建一個StatefulWidget,并且會自動生成State,很省事
stless ===> 創建一個StatelessWidget
在把這三個界面整合到一起之前,我想先插入一點很重要的知識。在Flutter里面萬物皆是Widget,所以我想先介紹一下Widget的生命周期。但是說Widget的生命周期這個說法其實是不準確的。
因為Widget分為StatefulWidget和StatelessWidget,可變的是StatefulWidget,它的可變又是通過修改State來完成的,等下在代碼里面可以看到有@override標識的生命周期方法其實是在繼承于State的狀態類里面寫的。所以說成是State的生命周期更加準確一點。
方法名稱 | 狀態 |
---|---|
initState | 插入渲染樹時調用,只調用一次 |
didChangeDependencies | state依賴的對象發生變化時調用 |
didUpdateWidget | 組件狀態改變時候調用,可能會調用多次 |
build | 構建Widget時調用 |
deactivate | 當移除渲染樹的時候調用 |
dispose | 組件即將銷毀時調用 |
完整的生命如圖所有的方法和分階段執行的圖解,很詳細了。圖片是從閑魚技術那里copy來的。推薦大家都關注一下閑魚技術,他們確實在Flutter這一塊有很多自己的實踐文章
現在我們把三個頁面放到main.dart里面,做出一個類似BottomNaivigationView的效果。
首先在main.dart文件里面導入之前我們寫好的三個tab頁
import './pages/FirstTab.dart'; import './pages/SecondTab.dart'; import './pages/ThirdTab.dart';
我這里因為是已經寫完了,就是使用過這三個了,字體不會是灰色帶波浪線的。所以大家碰到灰色帶波浪線的話也不要慌張,寫完就好了。
main.dart完整代碼:
import 'package:flutter/material.dart'; import './pages/FirstTab.dart'; import './pages/SecondTab.dart'; import './pages/ThirdTab.dart';void main(){ runApp( new MaterialApp( title:'tabdemo', home:new HomePage() ) ); }class HomePage extends StatefulWidget { @override _HomePageState createState() =>new _HomePageState(); }class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{//Tab頁的控制器,可以用來定義Tab標簽和內容頁的坐標 TabController tabcontroller; //生命周期方法插入渲染樹時調用,只調用一次 @override void initState() { super.initState(); tabcontroller = new TabController( length: 3, //Tab頁的個數 vsync: this //動畫效果的異步處理,默認格式 ); }//生命周期方法構建Widget時調用 @override Widget build(BuildContext context) { return new Scaffold( body: new TabBarView( controller: tabcontroller, children: <Widget>[ //創建之前寫好的三個頁面,萬物皆是Widget new FirstTab(), new SecondTab(), new ThirdTab(), ], ), bottomNavigationBar: new Material( //底部欄整體的顏色 color: Colors.blueAccent, child: new TabBar( controller: tabcontroller, tabs: <Tab>[ new Tab(text: "第一個",icon: new Icon(Icons.android)), new Tab(text: "第二個",icon: new Icon(Icons.home)), new Tab(text: "第三個",icon: new Icon(Icons.accessibility)), ], //tab被選中時的顏色,設置之后選中的時候,icon和text都會變色 labelColor: Colors.amber, //tab未被選中時的顏色,設置之后選中的時候,icon和text都會變色 unselectedLabelColor: Colors.black, ), ) ); }//組件即將銷毀時調用 @override void dispose() { //釋放內存,節省開銷 tabcontroller.dispose(); super.dispose(); } }
1.首先main方法是主入口。title里面的標題就是app在后臺時顯示的名字。
2.HomePage是一個有狀態的組件,通過修改_HomePageState 來修改他顯示內容
3._HomePageState 里面有三個方法initState,build,dispose。這三個都是生命周期方法,上面表格里面有詳細描述,在這里是按照我代碼里面的順序執行的。
4.TabController相當于是tabbar的控制器,在build方法里面創建控件的時候作為參數傳入
5.build方法里面先是創建了一個Scaffold,然后里面放入了控件,也就是界面顯示出來的東西,類似于安卓里面的view。控件的具體用法可參考 Widget目錄
6.最后在dispose組件銷毀的時候銷毀掉tabcontroller
其實實現的也比較簡單,就是三個可以切換的頁面,既可以點擊切換,又可以滑動切換。
我的代碼里面有很多new關鍵字,其實在Dart2里面這些new是可以省略掉的,但是因為我寫Java寫習慣了,為了便于大家閱讀,我還是加了new的。
然后其實我現在也只是一個小菜雞,一些復雜的界面自己現在也實現不了,還在學習之中。后期抽空會把這三個子界面完善出來,盡量實現一些常用的東西,比如列表,界面跳轉,手勢,動畫之類的。暫時的想法是這樣。謝謝閱讀,大家周末愉快~
代碼地址
日期:2018-10 瀏覽次數:7525
日期:2018-12 瀏覽次數:4598
日期:2018-07 瀏覽次數:5115
日期:2018-12 瀏覽次數:4402
日期:2018-09 瀏覽次數:5756
日期:2018-12 瀏覽次數:10181
日期:2018-11 瀏覽次數:5091
日期:2018-07 瀏覽次數:4845
日期:2018-05 瀏覽次數:5098
日期:2018-12 瀏覽次數:4562
日期:2018-10 瀏覽次數:5377
日期:2018-12 瀏覽次數:6438
日期:2018-11 瀏覽次數:4705
日期:2018-08 瀏覽次數:4850
日期:2018-11 瀏覽次數:12938
日期:2018-09 瀏覽次數:5858
日期:2018-12 瀏覽次數:5084
日期:2018-10 瀏覽次數:4423
日期:2018-11 瀏覽次數:4769
日期:2018-12 瀏覽次數:6299
日期:2018-06 瀏覽次數:4249
日期:2018-08 瀏覽次數:5697
日期:2018-10 瀏覽次數:4681
日期:2018-12 瀏覽次數:4792
日期:2018-07 瀏覽次數:4614
日期:2018-12 瀏覽次數:4783
日期:2018-06 瀏覽次數:4623
日期:2018-11 瀏覽次數:4603
日期:2018-12 瀏覽次數:4526
日期:2018-12 瀏覽次數:5507
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.