Flutter學習筆記（17）--頂部導航TabBar、TabBarView、DefaultTabController

如需轉載，請註明出處：Flutter學習筆記（17）--頂部導航TabBar、TabBarView、DefaultTabController

 上一篇我們說了BottmNavigationBar底部導航組件，今天來學習一下頂部導航組件TabBar，TabBar選項卡一般位於AppBar下方，通常和TabBar（頂部導航選項卡）一起使用的有TabBarView和TabController。

TabBar：Tab頁的選項組件，預設為水平排列。

TabBarView：Tab頁的內容容器，Tab頁內容一般處理為隨選項卡的改變而改變。

TabController：TabBar和TabBarView的控制器，它是關聯這兩個組件的橋梁。

上面我們說的TabController，與其併列的還有DefaultTabController，兩者的區別是TabController一般放在有狀態組件中使用，而DefaultTabController一般放在無狀態組件中使用。

下麵通過DefalutTabController來關聯TabBar和TabBarView來實現一個Demo：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  final List<Tab> _myTabs = <Tab>[
    Tab(text: '選項一',icon: Icon(Icons.add_shopping_cart),),
    Tab(text: '選項二',icon: Icon(Icons.wifi_tethering),),
    Tab(text: '選項三',icon: Icon(Icons.airline_seat_flat_angled),)
  ];
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TabBar Demo',
      home: new Scaffold(
        body: DefaultTabController(
            length: _myTabs.length,
            initialIndex: 1,
            child: Scaffold(
              appBar: new AppBar(
                title: new Text('TabBar Demo'),
                leading: Icon(Icons.menu),
                actions: <Widget>[
                  Icon(Icons.search)
                ],
                bottom: new TabBar(
                  tabs: _myTabs,
                  indicatorColor: Colors.black,
                  indicatorWeight: 5,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Colors.limeAccent,
                  unselectedLabelColor: Colors.deepOrange,
                ),
              ),
              body: new TabBarView(
                  children: _myTabs.map((Tab tab){
                    return Center(
                        child: new Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.tab),
                            Text(tab.text)
                          ],
                      ),
                    );
                  }).toList(),
              ),
            )
        ),
      ),
    );
  }
}

效果截圖：

接下來分別看一下DefaultTabController、TabBar、TabBarView的構造函數有什麼：

• DefaultTabController

  const DefaultTabController({
    Key key,
    @required this.length,
    this.initialIndex = 0,
    @required this.child,
  }) : assert(initialIndex != null),
       super(key: key);

• TabBar

  const TabBar({
    Key key,
    @required this.tabs,//顯示的標簽內容，一般使用Tab對象，也可以是其他Widget
    this.controller,//TabController對象
    this.isScrollable = false,//是否可以滾動
    this.indicatorColor,//指示器顏色
    this.indicatorWeight = 2.0,//指示器的高度
    this.indicatorPadding = EdgeInsets.zero,//指示器底部的padding
    this.indicator,//指示器decoration，例如邊框等
    this.indicatorSize,//指示器大小的計算方式，TabBarIndicatorSize.tab：跟每個tab等寬，TabBarIndicatorSize.label：跟文字等寬
    this.labelColor,//選中label的顏色
    this.labelStyle,//選中label的樣式
    this.labelPadding,每個label的padding
    this.unselectedLabelColor,//未選中label的顏色
    this.unselectedLabelStyle,//未選中label的樣式
  }) : assert(tabs != null),
       assert(isScrollable != null),
       assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
       assert(indicator != null || (indicatorPadding != null)),
       super(key: key);

• TabBarView

  const TabBarView({
    Key key,
    @required this.children,//Tab頁內容組件的數組集合
    this.controller,//TabController對象
    this.physics,
  }) : assert(children != null), super(key: key);

總結一下使用吧：一般流程就是初始化tabs的List列表，先把選項卡的選項初始化出來，接下來就是DefaultTabController把TabBar和TabBarView關聯起來，最後就是給TabBar和TabBarView設置各種屬性來滿足需求。