Flutter顶部导航Tab使用

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

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

通常有两种方式来实现Tab,一种使用StatelessWidgetDefaultTabController,一种使用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放到了AppBartitle上。

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

class TopTabPage2State extends State<TopTabPage2>
    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结合,发现老是有各种问题,还没有找到解决办法,有知道的童鞋麻烦告知一下,谢谢。

推荐阅读更多精彩内容