【Flutter 專題】75 圖解基本 TabBar 標籤導航欄 (一)

      和尚今天學習一下經常使用的 TabBar 導航欄使用方法；

源碼分析

const TabBar({
    Key key,
    @required this.tabs,            // 頂部標籤 Tab 組件列表
    this.controller,                // 頂部標籤 Tab 控制器
    this.isScrollable = false,      // 標籤 Tab 是否可滑動
    this.indicatorColor,            // 底部指示器顏色
    this.indicatorWeight = 2.0,     // 底部指示器高度
    this.indicatorPadding = EdgeInsets.zero,    // 底部指示器內邊距
    this.indicator,                 // 指示器樣式
    this.indicatorSize,             // 指示器寬度
    this.labelColor,                // 標籤 Tab 內容顏色
    this.labelStyle,                // 標籤 Tab 內容樣式
    this.labelPadding,              // 標籤 Tab 內邊距
    this.unselectedLabelColor,      // 未選中標籤 Tab 顏色
    this.unselectedLabelStyle,      // 未選中標籤 Tab 樣式
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,
})

const TabBarView({
    Key key,
    @required this.children,    // 每一個 Tab 對應的 Widgets
    this.controller,            // 導航欄控制器
    this.physics,               // 滑動動畫
    this.dragStartBehavior = DragStartBehavior.start,   // 處理拖拽開始行爲方式
})

      分析源碼可得，TabBar 與 TabBarView 是配對使用的，其對應的 Tab 數量必須相同；其中 TabBar 中提供了衆多相關指示器屬性，且 TabBar 與 TabBarView 上下拖拽方式區分設置，互不影響；

案例嘗試

TabBar

1. tabs 爲頂部標籤列表； controller 爲標籤控制器，若未提供此標籤控制器，可以使用系統 DefaultTabController 控制器；和尚建立一個基本的 TabBar 樣式，其中 TabBar 與 TabBarView 共用一個 TabController 控制器，且對應數量一致；

// 設置 TabController
class _TabBarPageState extends State<TabBarPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 4);
  }

  @override
  Widget build(BuildContext context) => MaterialApp(home: Scaffold(
            appBar: AppBar(title: Text('TabBar Page'),
                bottom: TabBar(tabs: <Widget>[
                  Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會員中心'), Tab(text: '分類')
                ], controller: _tabController)),
            body: TabBarView(controller: _tabController, children: <Widget>[
              Center(child: Text('今日爆款')), Center(child: Text('土貨生鮮')), Center(child: Text('會員中心')), Center(child: Text('分類'))
            ])));
}
==========================================================================================================================================
// 未提供 TabController，使用 DefaultTabController 方式
@override
Widget build(BuildContext context) => DefaultTabController(length: 4,
    child: Scaffold(appBar: AppBar(title: Text('TabBar Page'),
            bottom: TabBar(tabs: <Widget>[
              Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會員中心'), Tab(text: '分類')
            ])),
        body: TabBarView(children: <Widget>[
          Center(child: Text('今日爆款')), Center(child: Text('土貨生鮮')), Center(child: Text('會員中心')), Center(child: Text('分類'))
        ])));

2. isScrollable 爲標籤欄是否可滑動，若設爲 true 可按照每一個標籤寬度延伸，總體可超過屏幕寬度，若不超過屏幕寬度居中展現；若設爲 false 則以屏幕寬度爲準，多個標籤均分寬度；

isScrollable: true/false

3. indicatorColor 爲底部指示器顏色； indicatorWeight 爲底部指示器高度； indicatorPadding 爲底部指示器內邊距；

indicatorColor: Colors.redAccent,
indicatorWeight: 10,
indicatorPadding: EdgeInsets.all(5),

4. indicatorSize 爲指示器寬度，其中包括指示器 indicatorPadding 內邊距寬度；爲 TabBarIndicatorSize， TabBarIndicatorSize.tab 與分配的單個 Tab 寬度； TabBarIndicatorSize.label 爲單個 Tab 中 Widget 內容寬度；

indicatorSize: TabBarIndicatorSize.tab,

indicatorSize: TabBarIndicatorSize.label,

5. labelColor 爲 Tab 標籤內容顏色； labelStyle 爲 Tab 標籤樣式； labelPadding 爲 Tab 內邊距；當 labelColor 和 labelStyle 均設置顏色時以 labelColor 爲準；但若是 Tab 中 Widgets 設置樣式時以 Tab 設置爲準， labelStyle 不生效；

// tabs 內容
Tab(text: '今日爆款'), Tab(text: '土貨生鮮'), Tab(text: '會員中心'),
Tab(child: Text('分類', style: TextStyle(color: Colors.black, fontSize: 18))),

labelColor: Colors.redAccent,
labelStyle: TextStyle(color: Colors.green, fontSize: 16),

6. unselectedLabelColor 爲未選中標籤顏色； unselectedLabelStyle 爲未選中標籤樣式；當 unselectedLabelColor 和 unselectedLabelStyle 均設置顏色時以 unselectedLabelColor 爲準；但若是 Tab 中 Widgets 設置樣式時以 Tab 設置爲準， unselectedLabelStyle 不生效；

labelColor: Colors.redAccent,
labelStyle: TextStyle(color: Colors.green, fontSize: 16),
unselectedLabelColor: Colors.white,
unselectedLabelStyle: TextStyle(fontSize: 14),

7. dragStartBehavior 爲處理拖拽開始行爲方式，DragStartBehavior.start 爲初始位置爲拖動開始位置；DragStartBehavior.down 爲初始位置爲點擊觸摸下位置；和尚對此理解不夠深刻，但願更清楚的朋友多多交流；

dragStartBehavior: DragStartBehavior.down,

TabBarView

      physics 爲通用的滑動動畫，能夠設置是否滑動或其餘滑動模式；可經過 NeverScrollableScrollPhysics() 禁止滑動切換 Tab；

physics: NeverScrollableScrollPhysics(),

小擴展

      TabBar 通常使用在 AppBar bottom 中，上面會有 Title 層，和尚嘗試，TabBar 也能夠直接應用在 Title 處；

Scaffold(appBar: AppBar(title: _tabBarBottom()), body: _tabBarView())

Scaffold(appBar: AppBar(
    title: _tabBarBottom(), leading: Icon(Icons.android),
    actions: <Widget>[Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Icon(Icons.list))]),
    body: _tabBarView())

---

      TabBar 案例源碼

---

      和尚對 TabBar 的應用不夠深刻，下節重點嘗試自定義 indicator；若有錯誤請多多指導！

來源：阿策小和尚

本文分享自微信公衆號 - 阿策小和尚（gh_8297e718c166）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。