TabController定義頂部tab切換

前面通過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<TabBarControllerPage> 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: <Widget>[
            Tab(text:"熱銷"),
            Tab(text:"推薦"),
          ],
        ),
      ),
      body: TabBarView(
        controller: this._tabController, 
        children: <Widget>[
          Center(child: Text("熱銷")),
          Center(child: Text("推薦"))
        ],
      ),
    );
  }
}

 代碼下載：點這里（提取碼：dwvo）