??????小菜今天學(xué)習(xí)一下常用的 TabBar 標(biāo)簽導(dǎo)航欄使用方法矛绘；
源碼分析
const TabBar({
Key key,
@required this.tabs, // 頂部標(biāo)簽 Tab 組件列表
this.controller, // 頂部標(biāo)簽 Tab 控制器
this.isScrollable = false, // 標(biāo)簽 Tab 是否可滑動(dòng)
this.indicatorColor, // 底部指示器顏色
this.indicatorWeight = 2.0, // 底部指示器高度
this.indicatorPadding = EdgeInsets.zero, // 底部指示器內(nèi)邊距
this.indicator, // 指示器樣式
this.indicatorSize, // 指示器寬度
this.labelColor, // 標(biāo)簽 Tab 內(nèi)容顏色
this.labelStyle, // 標(biāo)簽 Tab 內(nèi)容樣式
this.labelPadding, // 標(biāo)簽 Tab 內(nèi)邊距
this.unselectedLabelColor, // 未選中標(biāo)簽 Tab 顏色
this.unselectedLabelStyle, // 未選中標(biāo)簽 Tab 樣式
this.dragStartBehavior = DragStartBehavior.start,
this.onTap,
})
const TabBarView({
Key key,
@required this.children, // 每個(gè) Tab 對(duì)應(yīng)的 Widgets
this.controller, // 導(dǎo)航欄控制器
this.physics, // 滑動(dòng)動(dòng)畫(huà)
this.dragStartBehavior = DragStartBehavior.start, // 處理拖拽開(kāi)始行為方式
})
??????分析源碼可得双谆，TabBar 與 TabBarView 是配對(duì)使用的狸捅，其對(duì)應(yīng)的 Tab 數(shù)量必須相同偎巢；其中 TabBar 中提供了眾多相關(guān)指示器屬性微王，且 TabBar 與 TabBarView 上下拖拽方式區(qū)分設(shè)置屡限，互不影響；
案例嘗試
TabBar
- tabs 為頂部標(biāo)簽列表炕倘；controller 為標(biāo)簽控制器钧大，若未提供此標(biāo)簽控制器，可使用系統(tǒng) DefaultTabController 控制器激才；小菜創(chuàng)建一個(gè)基本的 TabBar 樣式拓型，其中 TabBar 與 TabBarView 共用一個(gè) TabController 控制器，且對(duì)應(yīng)數(shù)量一致瘸恼；
// 設(shè)置 TabController
class _TabBarPageState extends State<TabBarPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 4);
}
@override
Widget build(BuildContext context) => MaterialApp(home: Scaffold(
appBar: AppBar(title: Text('TabBar Page'),
bottom: TabBar(tabs: <Widget>[
Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會(huì)員中心'), Tab(text: '分類')
], controller: _tabController)),
body: TabBarView(controller: _tabController, children: <Widget>[
Center(child: Text('今日爆款')), Center(child: Text('土貨生鮮')), Center(child: Text('會(huì)員中心')), Center(child: Text('分類'))
])));
}
==========================================================================================================================================
// 未提供 TabController劣挫，使用 DefaultTabController 方式
@override
Widget build(BuildContext context) => DefaultTabController(length: 4,
child: Scaffold(appBar: AppBar(title: Text('TabBar Page'),
bottom: TabBar(tabs: <Widget>[
Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會(huì)員中心'), Tab(text: '分類')
])),
body: TabBarView(children: <Widget>[
Center(child: Text('今日爆款')), Center(child: Text('土貨生鮮')), Center(child: Text('會(huì)員中心')), Center(child: Text('分類'))
])));
- isScrollable 為標(biāo)簽欄是否可滑動(dòng)，若設(shè)為 true 可按照每個(gè)標(biāo)簽寬度延伸东帅，整體可超過(guò)屏幕寬度压固，若不超過(guò)屏幕寬度居中展示；若設(shè)為 false 則以屏幕寬度為準(zhǔn)靠闭，多個(gè)標(biāo)簽均分寬度帐我；
isScrollable: true/false
- indicatorColor 為底部指示器顏色；indicatorWeight 為底部指示器高度愧膀；indicatorPadding 為底部指示器內(nèi)邊距拦键；
indicatorColor: Colors.redAccent,
indicatorWeight: 10,
indicatorPadding: EdgeInsets.all(5),
- indicatorSize 為指示器寬度，其中包括指示器 indicatorPadding 內(nèi)邊距寬度檩淋；為 TabBarIndicatorSize芬为，TabBarIndicatorSize.tab 與分配的單個(gè) Tab 寬度；TabBarIndicatorSize.label 為單個(gè) Tab 中 Widget 內(nèi)容寬度蟀悦；
indicatorSize: TabBarIndicatorSize.tab,
indicatorSize: TabBarIndicatorSize.label,
- labelColor 為 Tab 標(biāo)簽內(nèi)容顏色媚朦；labelStyle 為 Tab 標(biāo)簽樣式；labelPadding 為 Tab 內(nèi)邊距日戈；當(dāng) labelColor 和 labelStyle 均設(shè)置顏色時(shí)以 labelColor 為準(zhǔn)询张；但如果 Tab 中 Widgets 設(shè)置樣式時(shí)以 Tab 設(shè)置為準(zhǔn)，labelStyle 不生效浙炼；
// tabs 內(nèi)容
Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會(huì)員中心'),
Tab(child: Text('分類', style: TextStyle(color: Colors.black, fontSize: 18))),
labelColor: Colors.redAccent,
labelStyle: TextStyle(color: Colors.green, fontSize: 16),
- unselectedLabelColor 為未選中標(biāo)簽顏色份氧；unselectedLabelStyle 為未選中標(biāo)簽樣式唯袄；當(dāng) unselectedLabelColor 和 unselectedLabelStyle 均設(shè)置顏色時(shí)以 unselectedLabelColor 為準(zhǔn)；但如果 Tab 中 Widgets 設(shè)置樣式時(shí)以 Tab 設(shè)置為準(zhǔn)蜗帜，unselectedLabelStyle 不生效越妈；
labelColor: Colors.redAccent,
labelStyle: TextStyle(color: Colors.green, fontSize: 16),
unselectedLabelColor: Colors.white,
unselectedLabelStyle: TextStyle(fontSize: 14),
- dragStartBehavior 為處理拖拽開(kāi)始行為方式，DragStartBehavior.start 為初始位置為拖動(dòng)開(kāi)始位置钮糖；DragStartBehavior.down 為初始位置為點(diǎn)擊觸摸下位置；小菜對(duì)此理解不夠深入酌住，希望更清楚的朋友多多交流店归；
dragStartBehavior: DragStartBehavior.down,
TabBarView
??????physics 為通用的滑動(dòng)動(dòng)畫(huà)，可以設(shè)置是否滑動(dòng)或其他滑動(dòng)模式酪我；可通過(guò) NeverScrollableScrollPhysics() 禁止滑動(dòng)切換 Tab消痛；
physics: NeverScrollableScrollPhysics(),
小擴(kuò)展
??????TabBar 一般使用在 AppBar bottom 中，上面會(huì)有 Title 層都哭，小菜嘗試秩伞，TabBar 也可以直接應(yīng)用在 Title 處；
Scaffold(appBar: AppBar(title: _tabBarBottom()), body: _tabBarView())
Scaffold(appBar: AppBar(
title: _tabBarBottom(), leading: Icon(Icons.android),
actions: <Widget>[Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Icon(Icons.list))]),
body: _tabBarView())
??????TabBar 案例源碼
??????小菜對(duì) TabBar 的應(yīng)用不夠深入欺矫，下節(jié)重點(diǎn)嘗試自定義 indicator纱新；如有錯(cuò)誤請(qǐng)多多指導(dǎo)！
來(lái)源： 阿策小和尚
