Flutter之切換導航TabBar組件

TabController

這是Tab頁的控制器，用於定義Tab標簽和內容頁的坐標，還可配置標簽頁的切換動畫效果等。

TabController的創建有兩種形式，一種是使用系統的DefaultTabController，第二種是自己定義一個TabController實現SingleTickerProviderStateMixin。

TabController一般放入有狀態控件中使用，以適應標簽頁數量和內容有動態變化的場景，如果標簽頁在APP中是靜態固定的格局，則可以在無狀態控件中加入簡易版的DefaultTabController以提高運行效率，畢竟無狀態控件要比有狀態控件更省資源，運行效率更快。

TabBar
Tab頁的Title控件，切換Tab頁的入口，一般放到AppBar控件下使用，內部有*Title屬性。其子元素按水平橫向排列布局，如果需要縱向排列，請使用Column或ListView控件包裝一下。子元素為Tab類型的數組。

TabBarView
Tab頁的內容容器，其內放置Tab頁的主體內容。子元素可以是多個各種類型的控件。

Tab使用方法

1、無狀態控件搭配DefaultTabController

這種方式很簡單，只要在Scaffold上面再套一層DefaultTabController就可以了。這種方式下，TabBarView會自動去查找這個tabController,如果找不到就會報錯。

class TabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            backgroundColor: Colors.orangeAccent,
            title: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
              indicatorColor: Colors.white,
            ),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      );
  }
}

2、有狀態控件搭配TabController

Tab頁的切換搭配了動畫，因此到State類上附加一個SingleTickerProviderStateMixin:

  //定義有狀態控件
class TabsPage extends StatefulWidget {
    @override
    _TabsPageState createState() => new _TabsPageState();
}

  //用於使用到了一點點的動畫效果，因此加入了
class _TabsPageState extends State<TabsPage> with SingleTickerProviderStateMixin{
　　TabController _tabController;

    ...
}

然后到有狀態控件的子類State中初始化控制器TabController：

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,     //動畫效果的異步處理，默認格式，背下來即可
      length: 3      //需要控制的Tab頁數量
    );    
  }
  //當整個頁面dispose時，記得把控制器也dispose掉，釋放內存
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

然后到TabBar和TabBarView中的controller屬性中調用控制器_tabController

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: Text('Keep Alive Demo'),
         bottom: TabBar(
           controller: _tabController, //配置控制器
           tabs: <Widget>[
             Tab(icon: Icon(Icons.directions_car)),
             Tab(icon: Icon(Icons.directions_transit)),
             Tab(icon: Icon(Icons.directions_bike)),
           ],
           indicatorColor: Colors.white, //tab標簽的下划線顏色
         ),
      ),
      body: TabBarView(
        controller: _tabController, //配置控制器
        children: <Widget>[
          new Icon(Icons.directions_car),
          new Icon(Icons.directions_transit),
          new Icon(Icons.directions_bike),
        ],
      ),
    );
  }