頂部導航TabBar、TabBarView、DefaultTabController

原文地址：https://www.cnblogs.com/upwgh/p/11369537.html

TabBar：Tab頁的選項組件，默認爲水平排列。

TabBarView：Tab頁的內容容器，Tab頁內容通常處理爲隨選項卡的改變而改變。

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

TabBar組件常見屬性

屬性名	類型	說明
isScrollable	bool	是否能夠水平移動
tabs	List<Widget>	Tab選項列表

 

 

 

 

 

Tab組件常見屬性

屬性名	類型	說明
icon	Widget	Tab圖標
text	String	Tab文本

 

 

 

 

 

TabBarView組件常見屬性

屬性名	類型	說明
controller	TabController	指定視圖的控制器
children	List<Widget>	視圖組件的child爲一個列表，一個選項卡對應一個視圖

 

 

 

 

 

 

上面咱們說的TabController，與其並列的還有DefaultTabController，二者的區別是TabController通常放在有狀態組件中使用，而DefaultTabController通常放在無狀態組件中使用。

下面經過DefalutTabController來關聯TabBar和TabBarView來實現一個Demo：

按 Ctrl+C 複製代碼

按 Ctrl+C 複製代碼

 

 

效果截圖：

接下來分別看一下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設置各類屬性來知足需求。