Flutter顶部导航Tab使用

Flutter中的顶部Tab可以利用Material库中的TabBar以及TabBarView来实现。TabBar通常创建后作为AppBar的bottom属性进行使用，实际测试，你也可以放到AppBar的title中。需要提供一个TabController来串联TabBar和TabBarView，可以自行构造一个，也可以使用DefaultTabController。

注意：TabBar需要它的某个父级Widget必须是一个Material控件，通常你看到的都是其有一个父级Widget为Scaffold。

通常有两种方式来实现Tab，一种使用StatelessWidget和DefaultTabController，一种使用StatefulWidget和自行构造的TabController。

使用DefaultTabController来实现简单的tab效果：

class TopTabPage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('交通工具'),
          bottom: TabBar(tabs: [
            Tab(
              icon: Icon(Icons.directions_car),
              text: "汽车",
            ),
            Tab(
              icon: Icon(Icons.directions_bike),
              text: "自行车",
            ),
            Tab(
              icon: Icon(Icons.directions_boat),
              text: '轮船',
            ),
          ]),
        ),
        body: TabBarView(children: [
          Center(child: Text('汽车')),
          Center(child: Text('自行车')),
          Center(child: Text('轮船')),
        ]),
      ),
    );
  }
}

效果如下：

image.png

使用StatefulWidget和自行构造TabController实现

下面代码将TabBar放到了AppBar的title上。

class TopTabPage2 extends StatefulWidget {
  @override
  State createState() => TopTabPage2State();
}

class TopTabPage2State extends State
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TabBar(
          tabs: [
            Tab(
              icon: Icon(Icons.directions_car),
              text: "汽车",
            ),
            Tab(
              icon: Icon(Icons.directions_bike),
              text: "自行车",
            ),
            Tab(
              icon: Icon(Icons.directions_boat),
              text: '轮船',
            ),
          ],
          controller: tabController,
        ),
      ),
      body: TabBarView(
        children: [
          Center(child: Text('汽车')),
          Center(child: Text('自行车')),
          Center(child: Text('轮船')),
        ],
        controller: tabController,
      ),
    );
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }
}

效果如下：

image.png

以上两种方式都需要配合AppBar来使用，我尝试过不和AppBar结合，发现老是有各种问题，还没有找到解决办法，有知道的童鞋麻烦告知一下，谢谢。