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

Jimi發表於2021-08-25

Flutter元件tabBar

TabBar介紹

一個顯示水平行選項卡的Widget。通常建立為 AppBar 的 AppBar.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個屬性

欄位	屬性	描述
tabs	List	兩個多個的Tab列表
controller	TabController	控制tab的控制器
isScrollable	bool	標籤欄是否可以水平滾動
indicatorColor	Color	設定選中Tab指示器的顏色
automaticIndicatorColorAdjustment	bool	是否自動調整indicatorColor
indicatorWeight	double	設定選中Tab指示器線條的粗細
indicatorPadding	EdgeInsetsGeometry	設定選中Tab指示器間距，預設值為 EdgeInsets.zero
indicator	Decoration	設定選中Tab指示器的外觀
indicatorSize	TabBarIndicatorSize	設定選中Tab指示器的大小
labelColor	Color	設定選中Tab文字的顏色
labelStyle	TextStyle	設定選中Tab文字的樣式
labelPadding	EdgeInsetsGeometry	設定選中Tab文字的間距
unselectedLabelColor	Color	設定未選中Tab文字的顏色
unselectedLabelStyle	TextStyle	設定未選中Tab文字的樣式
dragStartBehavior	DragStartBehavior	處理拖動開始行為的方式
overlayColor	MaterialStateProperty	定義響應焦點、懸停和飛濺顏色
mouseCursor	MouseCursor	滑鼠指標進入或懸停在滑鼠指標上時的游標
enableFeedback	bool	檢測到的手勢是否應提供聲音和/或觸覺反饋
onTap	ValueChanged	單擊Tab時的回撥
physics	ScrollPhysics	TabBar的滾動檢視如何響應使用者輸入

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，如果 automaticIndicatorColorAdjustment 為 true 時，那麼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

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

Flutter深入淺出元件篇---MaterialApp
2021-08-21
Flutter元件APP
Flutter深入淺出元件篇---Scaffold
2021-08-22
Flutter元件
Flutter深入淺出元件篇---AppBar
2021-08-23
Flutter元件APP
Flutter深入淺出元件篇---Padding、AnimatedPadding
2021-08-27
Flutter元件padding
Flutter深入淺出元件篇---SizeBox、FittedBox
2021-09-02
Flutter元件
Flutter深入淺出元件篇---Align、AnimatedAlign
2021-08-29
Flutter元件
Flutter深入淺出元件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox
2021-08-31
Flutter元件AI
Flutter深入淺出元件篇---繼承關係圖
2021-08-17
Flutter元件繼承
Flutter | 深入淺出Key
2019-04-02
Flutter
flutter ScopedModel深入淺出
2019-09-10
Flutter
深入淺出 Flutter Framework 之 PaintingContext
2020-05-30
FlutterFrameworkAIGCContext
深入淺出 Flutter Framework 之 BuildOwner
2020-05-16
FlutterFrameworkUI
深入淺出 Flutter Framework 之 Element
2020-05-17
FlutterFramework
深入淺出 Flutter Framework 之 Widget
2020-05-10
FlutterFramework
深入淺出理解 React高階元件
2018-11-15
React元件
Flutter深入淺出--（二）Flutter 的發展歷程
2020-01-07
Flutter
深入淺出PyTorch（運算元篇）
2020-06-22
PyTorch
Flutter基礎（六）Material元件之BottomNavigationBar、TabBar、Drawer
2019-07-09
Flutter元件NavigationtabBar
Flutter 基礎（六）Material 元件之 BottomNavigationBar、TabBar、Drawer
2019-06-12
Flutter元件NavigationtabBar
深入淺出FE（十四）深入淺出websocket
2020-11-29
Web
深入淺出 Golang 資源嵌入方案：前篇
2022-01-17
Golang
深入淺出Java執行緒池：使用篇
2021-01-31
Java執行緒
Flutter 自定義 TabBar
2020-12-27
FluttertabBar
深入淺出解讀 Spring 原始碼：IOC/AOP 篇
2018-04-12
Spring原始碼
深入淺出Java執行緒池：原始碼篇
2021-02-06
Java執行緒原始碼
淺讀-《深入淺出Nodejs》
2023-03-30
NodeJS
深入淺出mongoose
2019-03-03
Go
HTTP深入淺出
2019-04-05
HTTP
深入淺出Webpack
2018-04-09
Web
深入淺出HTTP
2018-06-09
HTTP
mysqldump 深入淺出
2018-08-08
MySql
深入淺出——MVC
2020-05-26
MVC
深入淺出IO
2019-05-14
深入淺出decorator
2018-12-28
ArrayList 深入淺出
2021-07-23
深入淺出 RabbitMQ
2021-09-09
MQ
深入淺出Promise
2021-06-08
Promise
深入淺出 ZooKeeper
2020-12-29

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

TabBar介紹

在什麼情況下使用TabBar

示例程式碼

如何使用

步驟一：建立TabController

步驟二：建立tabs

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

DEMO效果

TabBar屬性和說明

TabBar屬性詳細使用

1、tabs

使用方法

2、controller

使用方法

3、isScrollable

使用方法

4、indicatorColor

使用方法

5、automaticIndicatorColorAdjustment

使用方法

6、indicatorWeight

使用方法

7、indicatorPadding

使用方法

8、indicator

使用方法

9、indicatorSize

使用方法

10、labelColor

使用方法

11、labelStyle

使用方法

12、labelPadding

使用方法

13、unselectedLabelColor

使用方法

14、unselectedLabelStyle

使用方法

15、dragStartBehavior

使用方法

16、overlayColor

17、mouseCursor

使用方法

18、enableFeedback

使用方法

19、onTap

使用方法

20、physics

使用方法

總結

相關文章