前面通过DefaultTabController组件实现了AppBar里面的顶部导航切换，但是在项目中有数据请求，上拉加载更多等操作的时候，前面的写法，就不是很方便操作，因此，在flutter里面，还提供了一个用于实现顶部导航的组件：tabController。

基本实现

为了实现tabController的顶部切换，在前面项目的基础上，新建一个TabBarController.dart的页面，然后配置路由，并在首页配置路由跳转按钮。

接下来是写abBarController.dart的页面。

首先，要使用tabController组件，就必须是在一个继承StatefulWidget的动态组件，并且还要实现SingleTickerProviderStateMixin这个类，

然后在组件初始化的时候，实例化TabController，实例化的时候需要传入两个参数，其中第一个是固定写法，第二个代表Tab个数。

 

剩下的和前面差不多了，在AppBar里配置bottom属性，设置导航，然后在body里面添加导航对应的页面，不同的是，不管在bottom里面还是body里面，都还需要添加controller: this._tabController。

 abBarController.dart

import 'package:flutter/material.dart';class TabBarControllerPage extends StatefulWidget {  TabBarControllerPage({Key key}) : super(key: key);  _TabBarControllerPageState createState() => _TabBarControllerPageState();}class _TabBarControllerPageState extends State
     
       with SingleTickerProviderStateMixin {  TabController _tabController;  @override  void initState() {      super.initState();    _tabController=new TabController(      vsync: this,      length: 2    );  }    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("TabBarControllerPage"),        bottom: TabBar(          controller: this._tabController,           tabs: 
      
       [            Tab(text:"热销"),            Tab(text:"推荐"),          ],        ),      ),      body: TabBarView(        controller: this._tabController,         children: 
       
        [          Center(child: Text("热销")),          Center(child: Text("推荐"))        ],      ),    );  }}
       
      
     

 代码下载：