Flutter 系列文章：Flutter TabBar 控件介紹

Flutter 系列文章：Flutter TabBar 控件介紹

1、控件介紹

一個頂部導航欄控件，用於進行不一樣視圖的切換，跟BottomNavigationBar相似，頂部導航欄能夠由文本、圖標 或者二者結合的形式組成，頂導航欄統籌與Scaffold結合使用，它一般做爲Scaffold.appBar參數提供。

2、使用方法

TabBar(
      tabs: widget.mTab, //設置tabbar 的標籤顯示內容，通常使用Tab對象,固然也能夠是其餘的Widget
      controller:TabController(length: 3, vsync: this), //TabController對象
      isScrollable: true, //是否可滾動
      indicatorColor: Colors.lightBlueAccent, //指示器顏色
      indicatorWeight: 10.0, //指示器的高度
      indicatorPadding: EdgeInsets.all(10), //底部指示器的Padding
      indicator: BoxDecoration(
          border: Border.all(
          width: 1, color: Colors.black)), //指示器decoration，例如邊框、顏色等
      indicatorSize: TabBarIndicatorSize.tab, //指示器大小計算方式,label 爲以文本爲邊框計算，tab 爲以指示器爲邊框計算
      labelColor: Colors.yellowAccent, //tab 標籤顏色
      labelStyle: TextStyle(color: Colors.black, fontSize: 20),
      unselectedLabelColor: Colors.redAccent, //未選中Tab中文字顏色
      unselectedLabelStyle:TextStyle(color: Colors.red, fontSize: 25),//未選中Tab中文字style
      )
  
複製代碼

2、經常使用屬性

1.設置tabbar 的標籤顯示內容，通常使用Tab對象,固然也能夠是其餘的Widget

tabs: widget.mTab, //設置tabbar 的標籤顯示內容，使用Tab對象
 
  var mTab = [
    Tab(text: 'tab1', icon: Icon(Icons.ac_unit)),
    Tab(text: 'tab2', icon: Icon(Icons.link)),
    Tab(text: 'tab3', icon: Icon(Icons.directions_run))
  ];

複製代碼

tabs: [Text('tab1'), Text('tab2'), Text('tab3')]  //使用widget的形式

複製代碼

2.設置TabController對象

controller:TabController(length: 3, vsync: this), //TabController對象

複製代碼

3.是否可滾動

isScrollable: true, // 是否可滾動
複製代碼

4.設置指示器顏色

indicatorColor: Colors.lightBlueAccent, //指示器顏色
複製代碼

5.指示器的高度

indicatorWeight: 10.0, //指示器的高度
複製代碼

6.底部指示器的Padding

indicatorPadding: EdgeInsets.all(10), //底部指示器的Padding
複製代碼

7.指示器decoration，例如邊框、顏色等

indicator: BoxDecoration(
      border: Border.all(
              width: 1, 
              color: Colors.black
              )
          ), //指示器decoration，例如邊框、顏色等
複製代碼

8.指示器大小計算方式,label 爲以文本爲邊框計算，tab 爲以指示器爲邊框計算

indicatorSize: TabBarIndicatorSize.tab, //指示器大小計算方式,label爲以文本爲邊框計算，tab 爲以指示器爲邊框計算
複製代碼

9.tab 標籤顏色

labelColor: Colors.yellowAccent, //tab 標籤顏色
複製代碼

10.設置標籤樣式

labelStyle: TextStyle(color: Colors.black, fontSize: 20)
複製代碼

11.未選中Tab中文字顏色

unselectedLabelColor: Colors.redAccent     
複製代碼

12.未選中Tab中文字style

unselectedLabelStyle:TextStyle(color: Colors.red, fontSize: 25), //未選中Tab中文字style
複製代碼

3、一個完整的例子

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'TabBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabBarPage(),
    ));

// This app is a stateful, it tracks the user's current choice.
class TabBarPage extends StatefulWidget {
  TabBarPage({Key key}) : super(key: key);
  var mTab = [
    Tab(text: 'tab1', icon: Icon(Icons.ac_unit)),
    Tab(text: 'tab2', icon: Icon(Icons.link)),
    Tab(text: 'tab3', icon: Icon(Icons.directions_run))
  ];
  @override
  _TabBarPageState createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> with TickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('TabBar Demo'),
          bottom: TabBar(
            tabs: widget.mTab, //設置tabbar 的標籤顯示內容，通常使用Tab對象,固然也能夠是其餘的Widget
// tabs: [Text('tab1'), Text('tab2'), Text('tab3')],
            controller: TabController(vsync: this, length: 3), //TabController對象
            isScrollable: true, //是否可滾動
            indicatorColor: Colors.lightBlueAccent, //指示器顏色
            indicatorWeight: 10.0, //指示器的高度
            indicatorPadding: EdgeInsets.all(10), //底部指示器的Padding
            indicator: BoxDecoration(
                border: Border.all(
                    width: 1, color: Colors.black)), //指示器decoration，例如邊框、顏色等
            indicatorSize: TabBarIndicatorSize
                .tab, //指示器大小計算方式,label 爲以文本爲邊框計算，tab 爲以指示器爲邊框計算
            labelColor: Colors.yellowAccent, //tab 標籤顏色
            labelStyle: TextStyle(color: Colors.black, fontSize: 20), //設置標籤樣式
            unselectedLabelColor: Colors.redAccent, //未選中Tab中文字顏色
            unselectedLabelStyle:
                TextStyle(color: Colors.red, fontSize: 25), //未選中Tab中文字style
          ) //tab 文字樣式

          ),
    );
  }
}


複製代碼