前言
Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發(fā)框架约啊，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等拙徽。
示意圖
示意圖
今天，我主要講解Flutter中布局方面的頂部導(dǎo)航欄TabBar + TabBarView + TabController诗宣，希望你們會喜歡膘怕。
示意圖
目錄
1. 簡介
Flutter中用于快速實現(xiàn)頂部導(dǎo)航欄的組件庫（Widget）
示意圖
2. 作用
- TabBar：導(dǎo)航欄標(biāo)題內(nèi)容
- TabBarView：描述導(dǎo)航欄當(dāng)前所對應(yīng)的內(nèi)容區(qū)（容器）
- TabController：關(guān)聯(lián)TabBar和TabBarView，即 哪個Tab對應(yīng)哪個內(nèi)容區(qū)
示意圖
3. 具體介紹
參數(shù)說明如下：
/**
* TabBar
**/
const TabBar({
Key key,
@required this.tabs,// 子標(biāo)簽梧田，一般使用Tab對象,當(dāng)然也可以是其他的Widget
this.controller,// 控制器淳蔼，即TabController對象
this.isScrollable = false,// 能否滑動。false：每個tab的寬度則等比裁眯，true：tab寬度則包裹item
this.indicatorColor,// 指示器顏色
this.indicatorWeight = 2.0, // 指示器厚度
this.indicatorPadding = EdgeInsets.zero, // 底部指示器的Padding
this.indicator, // 指示器decoration鹉梨，如邊框等
this.indicatorSize,// 指示器大小計算方式 - TabBarIndicatorSize.label：indicator與文字同寬，TabBarIndicatorSize.tab：與tab同寬
this.labelColor,// 選中標(biāo)簽顏色
this.labelStyle,// 選中標(biāo)簽樣式
this.labelPadding, // 選中標(biāo)簽的padding
this.unselectedLabelColor,// 未選中標(biāo)簽顏色
this.unselectedLabelStyle, // 未選中Tab中文字style
this.dragStartBehavior = DragStartBehavior.down,
this.onTap,// 點擊事件
})
/**
* TabBarView
**/
const TabBarView({
Key key,
@required this.children,//子widget
this.controller,//控制器
this.physics,
this.dragStartBehavior = DragStartBehavior.down,
})
/**
* TabController
**/
TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
_index = initialIndex, // 當(dāng)前選中Tab的下標(biāo)穿稳。注：改變index也會更新 previousIndex存皂、設(shè)置animation's的value值、重置indexIsChanging為false并且通知監(jiān)聽器
_previousIndex = initialIndex, // 上一個選中tab的index值逢艘，最初與index相同
_animationController = AnimationController.unbounded(
value: initialIndex.toDouble(),
vsync: vsync,
); // 該動畫值表示當(dāng)前TabBar選中的指示器位置以及TabBar和TabBarView的scrollOffsets
// 構(gòu)造函數(shù)的參數(shù)：
// 參數(shù)1：初始顯示的tab位置
// 參數(shù)2：tab的個數(shù)
// 參數(shù)3：動畫效果的異步處理旦袋，默認(rèn)格式
// 特別注意：參數(shù)indexIsChanging（bool）
// true：當(dāng)動畫從上一個跳到下一個時
4. 使用說明
/**
* TabController
* 作用：關(guān)聯(lián)TabBar和TabBarView，即 哪個Tab對應(yīng)哪個內(nèi)容區(qū)
**/
TabController mController = TabController(initialIndex: 0,length: 3, vsync: this);
// 初始化TabController
// 參數(shù)1：初始顯示的tab位置
// 參數(shù)2：tab的個數(shù)
// 參數(shù)3：動畫效果的異步處理它改，默認(rèn)格式
// 添加監(jiān)聽器
mController.addListener(() => _onTabChanged());
// 監(jiān)聽函數(shù)
_onTabChanged() {
print(mController.index);
}
/**
* TabBar
* 導(dǎo)航欄標(biāo)題內(nèi)容
**/
// 1. 設(shè)置要顯示的list內(nèi)容（要與TabController的長度對應(yīng)）
final List<Tab> titleTabs = <Tab>[
Tab(
text: 'Android',
),
Tab(
text: 'iOS',
),
Tab(
text: 'Web',
),
...
];
// 2. 創(chuàng)建TabBar組件 & 屬性
new TabBar(
controller: mController,// 設(shè)置控制器
labelColor: Colors.green, //選中的顏色
labelStyle: TextStyle(fontSize: 16), //選中的樣式
unselectedLabelColor: Colors.black, //未選中的顏色
unselectedLabelStyle: TextStyle(fontSize: 14), //未選中的樣式
indicatorColor: Colors.green, //下劃線顏色
isScrollable: false, //是否可滑動疤孕，設(shè)置不可滑動，則是tab的寬度等長
//tab標(biāo)簽
tabs: titleTabs, // 設(shè)置標(biāo)題（上面設(shè)置的內(nèi)容）
// 同樣是點擊事件（i是當(dāng)前點擊Tap的下標(biāo)數(shù)）
onTap: (int i) {
print(i);
},
),
/**
* TabBarView
* 導(dǎo)航欄每個標(biāo)題對飲的內(nèi)容
**/
new TabBarView(
controller: mController, // 設(shè)置控制器
children: <Widget>[ // 每個空間對應(yīng)的頁面央拖，此處根據(jù)需求進(jìn)行返回（（要與TabController的長度對應(yīng)））
Center(child:Text('Android')),
Center(child:Text('iOS')),
Center(child:Text('Web')),
...
],
),
);
5. 實例說明
本次采用的實例 = 3個Tab
示意圖
具體代碼如下：
main.dart
// Flutter入口
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TabViewDemo(),// 自己設(shè)置的TabView類
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
TabViewDemo.dart
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui';
class TabViewDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _TabViewState();
}
}
class _TabViewState extends State<TabViewDemo> with SingleTickerProviderStateMixin {
TabController mController;// tab控制器
final List<Tab> titleTabs = <Tab>[
Tab(
text: 'Android',
),
Tab(
text: 'iOS',
),
Tab(
text: 'Web',
),
];
@override
void initState() {
super.initState();
mController = TabController(initialIndex: 0,length: 3, vsync: this);
// 初始化TabController
// 參數(shù)1：初試顯示的tab位置
// 參數(shù)2：tab的個數(shù)
// 參數(shù)3：動畫效果的異步處理祭阀，默認(rèn)格式
// 添加監(jiān)聽器
mController.addListener(() => _onTabChanged());
}
@override
Widget build(BuildContext context) {
return new Scaffold(
// 創(chuàng)建TabBar & 設(shè)置屬性
appBar: new TabBar(
controller: mController,// 設(shè)置控制器
labelColor: Colors.green, //選中的顏色
labelStyle: TextStyle(fontSize: 16), //選中的樣式
unselectedLabelColor: Colors.black, //未選中的顏色
unselectedLabelStyle: TextStyle(fontSize: 14), //未選中的樣式
indicatorColor: Colors.green, //下劃線顏色
isScrollable: false, //是否可滑動鹉戚，設(shè)置不可滑動，則是tab的寬度等長
//tab標(biāo)簽
tabs: titleTabs, // 設(shè)置標(biāo)題
//點擊事件
onTap: (int i) {
print(i+10);
},
),
body: new TabBarView(
controller: mController,
children: <Widget>[ // 每個空間對應(yīng)的頁面
Center(child:Text('Android')),
Center(child:Text('iOS')),
Center(child:Text('Web')),
],
),
);
}
@override
void dispose() {
super.dispose();
mController.dispose(); // 當(dāng)整個頁面dispose時专控，記得把控制器也dispose掉抹凳，釋放內(nèi)存
}
// 點擊監(jiān)聽函數(shù)
_onTabChanged() {
print(mController.index);
}
}
6. 總結(jié)
- 本文全面介紹了
Flutter的布局組件中頂部導(dǎo)航欄的實現(xiàn)：TabBar + TabBarView + TabController - 接下來推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識伦腐，包括使用語法赢底、實戰(zhàn)等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請點贊柏蘑！因為你們的贊同/鼓勵是我寫作的最大動力幸冻！
相關(guān)文章閱讀
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面辩越、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡書嘁扼！
不定期分享關(guān)于安卓開發(fā)的干貨，追求短黔攒、平趁啸、快，但卻不缺深度督惰。
