[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: [
            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: [
          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: [
              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: [
            new Center(child: new Text('自行车')),
            new Center(child: new Text('船')),
            new Center(child: new Text('巴士')),
          ],
        ),
      ),
    );
  }

第二种代码如下：

class TabBarDemoState extends State
    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: [
            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: [
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }

关于学习

flutter的学习文章及代码都整理在这个github仓库里