TabBar常用于放在AppBar中，以标签页的形式展示同一个页面不同内容的主题标签。
常见的属性如下：
1. tabs 标签组；
2. controller 标签控制器；
3. isScrollable 标签组是否可以滚动；
4. indicatorColor 指示器的颜色；
5. indicatorWeight 指示器高度；
6. indicatorPadding 指示器的内边距；
7. indicator 指标器装饰；
8. indicatorSize 指示器的大小；
9. labelColor 标签的颜色；
扫描二维码关注公众号，回复：
12470516 查看本文章
10. labelStyle 标签的样式；
11. labelPadding 标签的内边距；
12. unselectedLabelColor 选中标签的颜色；
13. unselectedLabelStyle 选中标签的样式；
1. 实现一个普通的Tab选项卡
代码示例：
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的选项卡效果
代码如下：
// 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选项卡
代码如下：
// 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选项卡看起来很简单，但是由于加入了控制器，在实际项目中可以运用控制器实现一些复杂的页面交互。