緊接上一篇的有側邊欄APP泞歉,這次我們向APP中加入上下Tab頁,使之跟趨近主流大部分APP的信息布局套路宇弛,等不及看源碼的同學可以點擊進入我的git倉庫下載代碼鸡典。
Tab關鍵元素
-
TabController
這是Tab
頁的控制器,用于定義Tab
標簽和內容頁的坐標枪芒,還可配置標簽頁的切換動畫效果等彻况。
TabController一般放入有狀態(tài)控件中使用,以適應標簽頁數量和內容有動態(tài)變化的場景舅踪,如果標簽頁在APP中是靜態(tài)固定的格局纽甘,則可以在無狀態(tài)控件中加入簡易版的DefaultTabController以提高運行效率,畢竟無狀態(tài)控件要比有狀態(tài)控件更省資源抽碌,運行效率更快悍赢。
TabBar
Tab
頁的Title
控件,切換Tab
頁的入口货徙,一般放到AppBar
控件下使用左权,內部有*Title屬性。其子元素按水平橫向排列布局痴颊,如果需要縱向排列赏迟,請使用Column
或ListView
控件包裝一下。子元素為Tab
類型的數組蠢棱。TabBarView
Tab
頁的內容容器锌杀,其內放置Tab
頁的主體內容甩栈。子元素可以是多個各種類型的控件。
Tab使用方法
有狀態(tài)控件搭配TabController
Tab
頁的切換搭配了動畫糕再,因此到State
類上附加一個SingleTickerProviderStateMixin
:
//定義有狀態(tài)控件
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
//用于使用到了一點點的動畫效果谤职,因此加入了SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
...
}
然后到有狀態(tài)控件的子類State
中初始化控制器TabController
:
@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this, //動畫效果的異步處理,默認格式亿鲜,背下來即可
length: 3 //需要控制的Tab頁數量
);
}
//當整個頁面dispose時允蜈,記得把控制器也dispose掉,釋放內存
@override
void dispose() {
_tabController .dispose();
super.dispose();
}
然后到TabBar
和TabBarView
中的controller屬性中調用控制器_tabController
//標簽頁標題
new TabBar(
tabs: [ //注意TabBar的子元素為Tab類型的數組
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
]
//標簽頁內容區(qū)域
new TabBarView(
children: [
new Icon(Icons.directions_car),
new Icon(Icons.directions_transit),
new Icon(Icons.directions_bike),
]
最后蒿柳,我們把定義好的TabBar
和TabBarView
安放到需要的地方去饶套,比如:
new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.deepOrange,
title: new Text('title'),
),
....
body: new TabBarView( //TabBarView呈現(xiàn)內容,因此放到Scaffold的body中
controller: _bottomNavigation, //配置控制器
children: [ //注意順序與TabBar保持一直
new News(data: '參數值'), //上一篇定義好的子頁面
new TabPage2(),
new TabPage3(),
]
),
bottomNavigationBar: new Material( //為了適配主題風格垒探,包一層Material實現(xiàn)風格套用
color: Colors.deepOrange, //底部導航欄主題顏色
child: new TabBar( //TabBar導航標簽妓蛮,底部導航放到Scaffold的bottomNavigationBar中
controller: _bottomNavigation, //配置控制器
tabs: _bottomTabs,
indicatorColor: Colors.white, //tab標簽的下劃線顏色
),
)
);
無狀態(tài)控件搭配DefaultTabController
DefaultTabController
要簡單很多,由于應用在無狀態(tài)控件中圾叼,使用DefaultTabController
包裹需要用到Tab
的頁面即可:
class TabPage3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.orangeAccent,
title: new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
],
indicatorColor: Colors.white,
),
),
body: new TabBarView(
children: [
new Icon(Icons.directions_car),
new Icon(Icons.directions_transit),
new Icon(Icons.directions_bike),
],
),
),
);
}
}
DefaultTabController
和TabController
的用法差異主要在控制器的定義上蛤克,TabBar
和TabBarView
的使用方法完全相同,通常上下Tab
頁的標簽分別安放在Scaffold
控件的appBar和bottomNavigationBar屬性上夷蚊,然后我們把APP填充成下面這個樣式:
代碼結構
如上圖所示构挤,APP以底部Tab
導航欄為主入口,底部每個Tab
中又各自有自己的頂部次級Tab
頁惕鼓,因此我們把代碼結構整理一下:
-
_HomePageState
是APP的主頁面HomePage
的子類State
- 通過
Scaffold
底部的bottomNavigationBar屬性擺放TabBar
筋现,搭建Tab
頁的標簽欄 - 放入
Scaffold
的body屬性放入TabBarView
,TabBarView
的children是三個外部dart文件定義的控件頁面 - 外部dart文件定義的控件頁面分別又有各自風格的
Tab
標簽頁 -
Tab
頁的通用屬性可以提前定義到數組List
中箱歧,在TabBar
和TabBarView
通過遍歷提取List
的值創(chuàng)建子元素可以提高代碼的維護效率:
//在`StatefulWidget`控件中矾飞,可通過修改下面的數組,實現(xiàn)Tab頁的動態(tài)加載
final List<Tab> myTabs = <Tab>[
new Tab(text: 'Tab1'),
new Tab(text: 'Tab2'),
new Tab(text: 'Tab3'),
new Tab(text: 'Tab4'),
new Tab(text: 'Tab5'),
new Tab(text: 'Tab6'),
new Tab(text: 'Tab7'),
new Tab(text: 'Tab8'),
new Tab(text: 'Tab9'),
new Tab(text: 'Tab10'),
new Tab(text: 'Tab11'),
];
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.orangeAccent,
title: new TabBar(
controller: _tabController,
tabs: myTabs, //使用Tab類型的數組呈現(xiàn)Tab標簽
indicatorColor: Colors.white,
isScrollable: true,
),
),
body: new TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) { //遍歷List<Tab>類型的對象myTabs并提取其屬性值作為子控件的內容
return new Center(child: new Text(tab.text+' '+widget.data)); //使用參數值
}).toList(),
),
);
}
使用獲取到的參數
由于StatelessWidget
和StatefulWidget
的頁面構建不同呀邢,使用從外部獲取到的參數的方式也略有差異洒沦,在這里簡單總結下。
-
StatelessWidget
的獲參和用參方式
定義StatelessWidget
控件時价淌,添加一個final
類型的變量如pageText
申眼,用于為參數值預留空間,并在構造函數中加入參數值:
class SidebarPage extends StatelessWidget {
final String pageText; //定義一個常量输钩,用于保存跳轉進來獲取到的參數
SidebarPage(this.pageText); //構造函數豺型,獲取參數
...
}
使用參數時直接引用即可:
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text(pageText),), //將參數當作頁面標題
body: new Center(
child: new Text('pageText'),
),
);
}
從外部傳入參數時,直接向構造函數中填入參數值即可:
Navigator.of(context).push(new MaterialPageRoute(builder:
(BuildContext context) => new SidebarPage('First Page'))); //在new方法時調用控件的構造函數傳入參數值
-
StatefulWidget
的獲參和用參方式
相比StatelessWidget
略復雜买乃。定義構造函數時需要默認聲明key:
class TabPage1 extends StatefulWidget {
const TabPage1({ Key key , this.data}) : super(key: key); //構造函數中增加參數
final String data; //為參數分配空間
@override
_MyTabbedPageState createState() => new _MyTabbedPageState();
}
使用時,由于在State
子類中實現(xiàn)具體的頁面內容钓辆,因此State
子類使用父類TabPage1
的參數時需要在參數名前增加一個widget關鍵字:
class _MyTabbedPageState extends State<TabPage1> {
...
new Center(child: new Text(tab.text+' '+widget.data)); //使用參數值剪验,需在參數名前增加widget前綴
...
}
從外部傳入參數時肴焊,需要聲明參數名:
new TabBarView
controller: _bottomNavigation,
children: [
new TabPage1(data: '參數值'), //new方法調用構造函數時,還需要聲明參數名稱
new TabPage2(),
new TabPage3(),
]
)
好勒功戚,今天就講到這里娶眷,大家去下載我的git源碼試試效果吧,代碼中有附加的注釋啸臀,對一些控件屬性的特性也有單獨的描述届宠,相信看完源碼之后,大家也可以自行實現(xiàn)效果了乘粒。
順便分享一個雷區(qū),由于當初創(chuàng)建這個項目時灯萍,我使用命令flutter create [APPname1]的方式創(chuàng)建了這個項目,但我發(fā)現(xiàn)這個APPname1(代稱齿风,并非真實名稱)不好聽,想把項目改名為APPname2绑洛,于是參考之前寫的安卓怎么打包救斑?,把項目文件夾改名為APPname2真屯,并非常任性的把項目目錄下的android\app\src\main\AndroidManifest.xml文件,把package和android:label都改成了APPname2讨跟,于是不出意料的悲催了纪他,命令flutter fun報錯,無法啟動APP晾匠,還原配置之后茶袒,無法啟動APP凉馆,即便嘗試通過全文搜索APPname1,都按規(guī)定格式替換成APPname2澜共,或者逆向改回去,都無法啟動APP母谎,此時已是凌晨1點京革。幸斥。咬扇。妥妥的血淚史,所以鄭重的告誡大家:
不要在項目的各種配置文件中輕易改動項目名稱懈贺!不要在項目的各種配置文件中輕易改動項目名稱!不要在項目的各種配置文件中輕易改動項目名稱画侣! 否則你就是下一個在電腦面前捶胸頓足的魚丸胎源。什么?問我怎么恢復的宪卿?當然是托git的福万栅。
感謝大家的支持,請關注我的Flutter圈子烦粒,多多投稿,也可以加入flutter 中文社區(qū)(官方QQ群:338252156)共同成長兽掰,謝謝大家~