TabBar常用于放在AppBar中，以标签页的形式展示同一个页面不同内容的主题标签。
常见的属性如下：
1. tabs 标签组。值的类型为Widget列表；
2. controller 标签控制器。值的类型为TabController；
3. isScrollable 标签组是否可以滚动。值的类型为bool；
4. indicatorColor 指示器的颜色。值的类型为Colors；
5. indicatorWeight 指示器权重，即显示高度。值的类型为double；
6. indicatorPadding 指示器的内边距。值的类型为EdgeInsets；
7. indicator 指标器装饰。值的类型为Decoration；
8. indicatorSize 指示器的大小。值的类型为TabBarIndicatorSize，常用的值为TabBarIndicatorSize.label；
9. labelColor 标签的颜色。值的类型为Colors；
10. labelStyle 标签的样式。值的类型为TextStyle;
11. labelPadding 标签的内边距。值的类型为EdgeInsets；
12. unselectedLabelColor 选中标签的颜色。值的类型为Colors；
13. unselectedLabelStyle 选中标签的样式。值的类型为TextStyle;
1. 实现一个普通的Tab选项卡
代码示例：
代码语言：javascript复制import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 添加顶部导航条
return DefaultTabController(
// 切换的数量
length:2,
child: Scaffold(
appBar: AppBar(
// App标题
title:Text('Flutter App'),
// 无论什么平台，标题都居中
centerTitle: true,
// 背景颜色
backgroundColor: Colors.red,
// 标签栏
bottom: TabBar(
// 指示器的大小
indicatorSize: TabBarIndicatorSize.label,
// 标签
tabs: <Widget>[
Tab(text:"热门"),
Tab(text:"推荐")
],
),
),
// 标签页所对应的页面
body:TabBarView(
children: <Widget>[
ListView(
children:<Widget>[
Center(child:ListTile(
title:Text("热门内容")
))
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("推荐内容")
)
]
)
],
)
)
);
}
} 效果图如下：
2. 实现常见App的选项卡效果
代码如下：
代码语言：javascript复制// lib/pages/tabs/Gategory.dart
import "package:flutter/material.dart";
// 分类页面
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
// 标签数量
length: 9,
child:Scaffold(
appBar: AppBar(
title:Row(
children: <Widget>[
// 弹性容器布局
Expanded(
child:TabBar(
// 多个标签时滚动加载
isScrollable:true,
// 标签指示器的颜色
indicatorColor: Colors.red,
// 标签的颜色
labelColor: Colors.black,
// 未选中标签的颜色
unselectedLabelColor: Colors.white,
// 指示器的大小
indicatorSize: TabBarIndicatorSize.label,
// 指示器的权重，即线条高度
indicatorWeight: 4.0,
tabs: <Widget>[
Tab(text:"热销"),
Tab(text:"推荐"),
Tab(text:"搞笑"),
Tab(text:"妙招"),
Tab(text:"关注"),
Tab(text:"时尚"),
Tab(text:"女性"),
Tab(text:"服装"),
Tab(text:"男性"),
],
)
)
],
)
),
// 标签页所对应的页面
body:TabBarView(
children: <Widget>[
ListView(
children:<Widget>[
ListTile(
title:Text("热销内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("推荐内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("搞笑内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("妙招内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("关注内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("时尚内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("女性内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("服装内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("男性内容")
)
]
),
],
)
)
);
}
}效果图如下：
3. 自定义带控制器Tab选项卡
代码如下：
代码语言：javascript复制// lib/pages/tabs/Setting.dart
import "package:flutter/material.dart";
// 设置页面
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
_SettingPageState createState() => _SettingPageState();
}
// 混入 SingleTickerProviderStateMixin 这个类
class _SettingPageState extends State<SettingPage> with SingleTickerProviderStateMixin {
// 标签控制器
TabController _tabController;
@override
// 初始化加载-生命周期函数
void initState() {
super.initState();
// 定义控制器
_tabController = new TabController(
vsync: this,
length: 2,
);
// 添加监听事件
_tabController.addListener((){
print(_tabController.index);
});
}
// 关闭销毁-生命周期函数
@override
void dispose() {
super.dispose();
// 杀死控制器
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('设置页面'),
bottom: TabBar(
// 加上控制器
controller: this._tabController,
tabs: <Widget>[
Tab(text:'热门'),
Tab(text:'推荐'),
],
),
),
body: TabBarView(
// 加上控制器
controller: this._tabController,
children: <Widget>[
Center(child:Text('热门页面')),
Center(child:Text('推荐页面')),
],
),
);
}
}效果图如下：
上面这个自定义的Tab选项卡看起来很简单，但是由于加入了控制器，在实际项目中可以运用控制器实现一些复杂的页面交互。
