[Flutter]使用顶部切换导航TabBar
目前移动开发tab切换是一个很通用的功能，Flutter 通过Material 库提供了很方便的API来使用tab切换。
效果图
image
创建TabController
TabBarView和TabBar都有一个tabController的参数 TabBarView和Tab是就由TabController来控制同步的，点击了某个tab后，要同步的显示对应的TabBarView。TabController的创建有两种形式，一种是使用系统的DefaultTabController,这种方式很简单，只要在Scaffold上面再套一层DefaultTabController就可以了。这种方式下，TabBarView会自动去查找这个tabController,如果找不到就会报错。
第二种是自己定义一个TabController.实现SingleTickerProviderStateMixin
创建TabBar
TabBar哪里都可以创建，但是在AppBar里面有一个bottom参数可以接收TabBar，会放在导航栏的下面。
new TabBar(
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.directions_bike),
),
new Tab(
icon: new Icon(Icons.directions_boat),
),
new Tab(
icon: new Icon(Icons.directions_bus),
),
],
),创建Tab对应的内容Widget
tab对应的内容view要放在TabBarView里面。如下：
new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(child: new Text('自行车')),
new Center(child: new Text('船')),
new Center(child: new Text('巴士')),
],
),两种方式的完整代码
第一种实现代码如下：
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
title: new Text('顶部tab切换'),
bottom: new TabBar(
tabs: <Widget>[
new Tab(icon: new Icon(Icons.directions_bike),),
new Tab(icon: new Icon(Icons.directions_boat),),
new Tab(icon: new Icon(Icons.directions_bus),),
],
controller: _tabController,
),
),
body: new TabBarView(
children: <Widget>[
new Center(child: new Text('自行车')),
new Center(child: new Text('船')),
new Center(child: new Text('巴士')),
],
),
),
);
}第二种代码如下：
class TabBarDemoState extends State<TabBarDemo>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 3);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('顶部tab切换'),
bottom: new TabBar(
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.directions_bike),
),
new Tab(
icon: new Icon(Icons.directions_boat),
),
new Tab(
icon: new Icon(Icons.directions_bus),
),
],
controller: _tabController,
),
),
body: new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(child: new Text('自行车')),
new Center(child: new Text('船')),
new Center(child: new Text('巴士')),
],
),
);
}关于学习
flutter的学习文章及代码都整理在这个github仓库里
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录