前言
TabBar可用于在TabBarView中显示的页面之间导航。虽然TabBar是一个可以出现在任何地方的普通widget，但它通常包含在应用程序的AppBar中。
1.jpg
1、TabBar
const TabBar({
Key key,
@required this.tabs, //tab选项
this.controller, //控制器
this.isScrollable = false, //是否可以滚动
this.indicatorColor, //指示器颜色
this.indicatorWeight = 2.0, //指示器高度
this.indicatorPadding = EdgeInsets.zero, //指示器padding。默认tab宽度，0padding
this.indicator, //指示器
this.indicatorSize, //指示器大小（TabBarIndicatorSize.tab:Tab宽度；TabBarIndicatorSize.label：label内容宽度）
this.labelColor, //内容颜色
this.labelStyle, //内容Style，TextStyle
this.labelPadding,
this.unselectedLabelColor,
this.unselectedLabelStyle,
this.dragStartBehavior = DragStartBehavior.start,
this.onTap,
})
2、构建TabBar
tab选项数据源
var _tabList = ["All", "Android", "iOS", "Web"];
AppBar的bottom创建为TabBar
AppBar(
backgroundColor: Colors.white,
brightness: Brightness.light,
title: Center(
child: Text(
"分类",
),
),
bottom: TabBar(
controller: _tabController,
indicatorSize: TabBarIndicatorSize.label, //设置为Label宽度
tabs: _tabList.map((item) {
return Tab(text: item);
}).toList(),
),
)
2、TabBarView
用于和TabBar联动的组件，类似于Flutter的PageView和Android的ViewPager
const TabBarView({
Key key,
@required this.children, //子组件列表，一般应该和TabBar的item数量一致
this.controller,
this.physics,
this.dragStartBehavior = DragStartBehavior.start,
})
3、DefaultTabController
现在为了让TabBar和TabBarView联动，应该在外层套上DefaultTabController，代码如下
class _CategoryState extends State<CategoryPage> {
var _tabList = ["All", "Android", "iOS", "Web"];
var _tabController;
@override
void initState() {
super.initState();
_tabController = DefaultTabController.of(context);
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabList.length,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
brightness: Brightness.light,
title: Center(
child: Text(
"分类",
),
),
bottom: TabBar(
controller: _tabController,
indicatorSize: TabBarIndicatorSize.label,
tabs: _tabList.map((item) {
return Tab(text: item);
}).toList(),
),
),
body: TabBarView(
children: _tabList.map((item) {
return Center(
child: ArticleList(),
);
}).toList(),
)));
}
}
最终效果如下所示
2.gif
