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）