Flutter深入淺出元件篇---TabBar

Jimi發表於2021-08-25

TabBar介紹

​ 一個顯示水平行選項卡的Widget。 通常建立為 AppBarAppBar.bottom 部分並與 TabBarView 結合使用

在什麼情況下使用TabBar

​ 當你的app內容類別比較多的時候,我們常常會用到TabBar,例如網易新聞、京東、B站等,所以TabBar是一個使用非常頻繁的元件。

示例程式碼

本文中很多效果都沒有截圖,可下載原始碼執行專案 原始碼地址,或者通過視訊教程檢視 視訊教程地址

如何使用

步驟一:建立TabController

​ 為了使所選的 tab 與它所對應的內容能夠同步變化,需要用 TabController 進行控制。我們既可以手動建立一個 TabController ,也能夠直接使用 DefaultTabController widget。最簡單的選擇是使用 DefaultTabController widget,因為它能夠建立出一個可供所有子 widgets 使用的 TabController

DefaultTabController(
  // 選項卡的數量
  length: 3,
  child: // 在下一步完成此程式碼
);
複製程式碼

步驟二:建立tabs

​ 當我們建立DefaultTabController, 接下來就可以用 TabBar widget 來建立 tabs。下面這個建立了包含三組 Tab widget 的 TabBar(一個),並把它放置於 AppBar widget 中。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("TabBar"),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_bike),),
          Tab(icon: Icon(Icons.directions_boat),),
          Tab(icon: Icon(Icons.directions_car),),
        ],
      ),
    ),
  ),
);
複製程式碼

TabBar 預設將會在 Widget 樹中向上尋找離它最近的一個 DefaultTabController 節點作為自己的 TabController。如果您想手動建立 TabController,那麼您必須將它作為引數傳給 TabBar

步驟三:為每個Tab建立內容

​ 現在我們已經成功建立了一些 tabs,接下來要實現的是 tab 被選中時顯示其對應的內容。為了實現這個效果,我們將使用 TabBarView widget。

import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("TabBar"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_bike),),
              Tab(icon: Icon(Icons.directions_boat),),
              Tab(icon: Icon(Icons.directions_car),),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}
複製程式碼

​ 從上面這個小例子中我們簡單的體驗了一下 TabBar 是怎麼結合 TabBarView 來使用的。

DEMO效果

TabBar屬性和說明

總共20個屬性

欄位屬性描述
tabsList兩個多個的Tab列表
controllerTabController控制tab的控制器
isScrollablebool標籤欄是否可以水平滾動
indicatorColorColor設定選中Tab指示器的顏色
automaticIndicatorColorAdjustmentbool是否自動調整indicatorColor
indicatorWeightdouble設定選中Tab指示器線條的粗細
indicatorPaddingEdgeInsetsGeometry設定選中Tab指示器間距,預設值為 EdgeInsets.zero
indicatorDecoration設定選中Tab指示器的外觀
indicatorSizeTabBarIndicatorSize設定選中Tab指示器的大小
labelColorColor設定選中Tab文字的顏色
labelStyleTextStyle設定選中Tab文字的樣式
labelPaddingEdgeInsetsGeometry設定選中Tab文字的間距
unselectedLabelColorColor設定未選中Tab文字的顏色
unselectedLabelStyleTextStyle設定未選中Tab文字的樣式
dragStartBehaviorDragStartBehavior處理拖動開始行為的方式
overlayColorMaterialStateProperty定義響應焦點、懸停和飛濺顏色
mouseCursorMouseCursor滑鼠指標進入或懸停在滑鼠指標上時的游標
enableFeedbackbool檢測到的手勢是否應提供聲音和/或觸覺反饋
onTapValueChanged單擊Tab時的回撥
physicsScrollPhysicsTabBar的滾動檢視如何響應使用者輸入

TabBar屬性詳細使用

1、tabs

​ 由兩個多個組成的Tab列表

使用方法

TabBar(
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

2、controller

​ 可以控制tab的控制器

使用方法

TabController _tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

TabBar(
  controller: _tabController,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

複製程式碼

3、isScrollable

​ 標籤欄是否可以水平滾動

使用方法

TabBar(
  isScrollable: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

4、indicatorColor

​ 設定選中Tab指示器的顏色

使用方法

TabBar(
  indicatorColor: Colors.red,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

5、automaticIndicatorColorAdjustment

​ 是否自動調整 indicatorColor,如果 automaticIndicatorColorAdjustmenttrue 時,那麼indicatorColor 會自動調整成 Colors.white

使用方法

TabBar(
  automaticIndicatorColorAdjustment: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

6、indicatorWeight

​ 設定選中Tab指示器線條的粗細

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

7、indicatorPadding

​ 設定選中Tab指示器間距,預設值為 EdgeInsets.zero

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

8、indicator

​ 設定選中Tab指示器的外觀

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  indicator: BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.orange,
      Colors.green
    ]),
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

9、indicatorSize

​ 設定選中Tab指示器的大小,該值是一個列舉型別,TabBarIndicatorSize.tab 跟隨 Tab 的寬度,TabBarIndicatorSize.label 跟隨 Tab 內容文字的寬度。

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorSize: TabBarIndicatorSize.tab,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

10、labelColor

​ 設定選中Tab文字的顏色

使用方法

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.pink,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)
複製程式碼

11、labelStyle

​ 設定選中Tab文字的樣式

使用方法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

12、labelPadding

​ 設定選中Tab內容的間距

使用方法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

13、unselectedLabelColor

​ 設定未選中Tab文字的顏色

使用方法

TabBar(
	unselectedLabelColor: Colors.orange,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

14、unselectedLabelStyle

​ 設定未選中Tab文字的樣式

使用方法

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

15、dragStartBehavior

​ 處理拖動開始行為的方式

使用方法

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

16、overlayColor

​ 定義響應焦點、懸停和飛濺顏色。

​ 如果非空,則會使用 MaterialState.focused, MaterialState.hovered, and MaterialState.pressed 之一進行解析。

17、mouseCursor

​ 滑鼠指標進入或懸停在滑鼠指標上時的游標,針對 Flutter web 應用。

使用方法

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

18、enableFeedback

​ 檢測到的手勢是否應提供聲音和/或觸覺反饋,預設為 true

使用方法

TabBar(
  enableFeedback: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

19、onTap

​ 單擊Tab時的回撥

使用方法

TabBar(
  enableFeedback: true,
  onTap: (index) {
    print(index);
  },
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

20、physics

​ TabBar的滾動檢視如何響應使用者輸入,

​ 例如,確定在使用者停止拖動滾動檢視後滾動檢視如何繼續動畫。

使用方法

TabBar(
  physics: NeverScrollableScrollPhysics(),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "單車",),
    Tab(icon: Icon(Icons.directions_boat), text: "輪船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽車",),
  ],
)
複製程式碼

總結

​ 以上是 TabBar 的屬性詳細解析並寫了一個簡單的 demo ,在平時的開發過程中 TabBar

元件用的還是相對比較頻繁的,也是開發人員必須掌握的一個元件。

相關文章