本文记录Flutter开发的TabBar使用。 TabBar是选项切换页的意思,在android中通常是使用ViewPage来实现。在Flutter中,TabBar是被定义在Material Component中,所以他的使用需要在MaterialApp中。
为了让TabBar能正常使用,需要保持选项卡和内容同步,这个工作是由TabController来完成的。可以手动创建一个TabController,也可以使用默认的 DefaultTabController部件。
一、使用DefaultController
new MaterialApp(
home: new DefaultTabController(length: 3, child: new Scaffold(
appBar: new AppBar(
title: new Text('DefaultTabController'),
bottom: new TabBar(tabs: [
new Tab(text: '1'),
new Tab(text: '2'),
new Tab(text: '3'),
]),
),
body: new TabBarView(children: [
new Icon(Icons.more),
new Icon(Icons.more),
new Icon(Icons.more),
]),
)),
);
二、使用自定义的TabController
class _MyTabBarState extends State
with SingleTickerProviderStateMixin {
var _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("TabBar"),
elevation: 0.7,
bottom: new TabBar(
controller: _tabController,
indicator: new UnderlineTabIndicator(),
tabs: [
new Tab(
icon: new Icon(Icons.camera_alt),
),
new Tab(
text: "CHATS",
),
new Tab(
text: "STATUS",
),
new Tab(
text: "CALLS",
),
],
),
),
body: new TabBarView(controller: _tabController, children: [
new Center(),
new Center(),
new Center(),
new Center(),
]));
}
}
代码都很简单,可以看到他们都使用到了MaterialApp,Scaffold,TabBar,TabBarView。