【Flutter 專題】75 圖解基本 TabBar 標籤導航欄 (一)｜ 8月更文挑戰

阿策小和尚發表於2021-08-13
Flutter圖解tabBar

      “這是我參與8月更文挑戰的第13天，活動詳情檢視： 8月更文挑戰” juejin.cn/post/698796…

      小菜今天學習一下常用的 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('分類'))
        ])));
複製程式碼

  1. isScrollable 為標籤欄是否可滑動，若設為 true 可按照每個標籤寬度延伸，整體可超過螢幕寬度，若不超過螢幕寬度居中展示；若設為 false 則以螢幕寬度為準，多個標籤均分寬度；
isScrollable: true/false
複製程式碼

  1. indicatorColor 為底部指示器顏色；indicatorWeight 為底部指示器高度；indicatorPadding 為底部指示器內邊距；
indicatorColor: Colors.redAccent,
indicatorWeight: 10,
indicatorPadding: EdgeInsets.all(5),
複製程式碼

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

indicatorSize: TabBarIndicatorSize.label,
複製程式碼

  1. 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),
複製程式碼

  1. 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),
複製程式碼

  1. 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；如有錯誤請多多指導！

來源： 阿策小和尚

相關文章