1. 基本介绍

TabBar、TabBarView，TabController 提供了常见的多Tab切换的功能，例如电商网站上方横划的服装、家具、电子产品... 等切换页面，然后点击对应 tab 切换到不同专场这种功能。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

TabBar属性	介绍
controller	TabController，控制联动，Flutter 组件之 TabBarView 详解中有用到
isScrollable	是否可以滚动，默认为 false
indicatorColor	指示器颜色
indicatorWeight	指示器宽度
indicatorPadding	指示器间距 EdgeInsets.zero,
indicator	自定义指示器
indicatorSize	指示器大小
labelColor	title 颜色
labelStyle	title 样式
labelPadding	title 间距
unselectedLabelColor	未选中 title 颜色
unselectedLabelStyle	未选中 title 样式
dragStartBehavior	拖拽设置，默认为 DragStartBehavior.start,
mouseCursor	鼠标悬停，Web可以了解
onTap	点击事件
physics	滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现Android下微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。

4. TabBar 组件

4.1 容器创建

优雅的编程，首先创建一个 tabbar.dart 文件。

import 'package:flutter/material.dart';

class FMTabBarVC extends StatefulWidget {
  @override
  FMTabBarState createState() => FMTabBarState();
}

class FMTabBarState extends State<FMTabBarVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar'),
          bottom: _tabBar(),
      ),
      body: Container(
      color: Colors.grey,
      ),
    );
  }

  TabBar _tabBar(){
    return TabBar(
      tabs: [
        Tab(
          text: "tab1",
        ),
        Tab(
          text: "tab2",
        ),
        Tab(
          text: "tab3",
        ),
        Tab(
          text: "tab4",
        ),
        Tab(
          text: "tab5",
        ),
      ],
    );
  }
}

运行上边代码，会有如下报错。TabBar 在使用时必须指定一个 TabController 或者 DefaultTabController。

tabbar error no tabcontroller.png

No TabController for TabBar.

When creating a TabBar, you must either provide an explicit TabController using the "controller" property, or you must ensure that there is a DefaultTabController above the TabBar.
In this case, there was neither an explicit controller nor a default controller.

4.2 正确的 TabController 容器使用

为了修复以上报错，我们在 DefaultTabController 中使用 TabBar 组件。

import 'package:flutter/material.dart';

class FMTabBarVC extends StatefulWidget {
  @override
  FMTabBarState createState() => FMTabBarState();
}

class FMTabBarState extends State<FMTabBarVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: _tabBar(),
        ),
        body: Container(
          color: Colors.grey,
        ),
      ),
    );
  }

  TabBar _tabBar(){
    return TabBar(
      tabs: [
        Tab(
          text: "tab1",
        ),
        Tab(
          text: "tab2",
        ),
        Tab(
          text: "tab3",
        ),
        Tab(
          text: "tab4",
        ),
        Tab(
          text: "tab5",
        ),
      ],
    );
  }
}

tabbar.png

注意：length 一定要赋值，并且与 tabs 的数量相同，不然会有以下报错。

tabbar length error null.png

The method '>=' was called on null.
Receiver: null
Tried calling: >=(0)

tabbar length error.png

Controller's length property (6) does not match the number of tabs (5) present in TabBar's tabs property.

4.3 封装一个自动填充数据的 TabBar

import 'package:flutter/material.dart';

class FMTabBarVC extends StatefulWidget {
  @override
  FMTabBarState createState() => FMTabBarState();
}

class FMTabBarState extends State<FMTabBarVC> {
  var pageDatas = [];

  @override
  void initState(){
    super.initState();

    initData();
  }
  
  void initData(){
    pageDatas.add({"title":"一年级英语", "content":["我是一年级英语一班", "我是一年级英语二班","我是一年级英语三班"]});
    pageDatas.add({"title":"二年级英语", "content":["我是二年级英语一班", "我是二年级英语二班","我是二年级英语三班"]});
    pageDatas.add({"title":"三年级英语", "content":["我是三年级英语一班", "我是三年级英语二班","我是三年级英语三班"]});
    pageDatas.add({"title":"四年级英语", "content":["我是四年级英语一班", "我是四年级英语二班","我是四年级英语三班"]});
    pageDatas.add({"title":"五年级英语", "content":["我是五年级英语一班", "我是五年级英语二班","我是五年级英语三班"]});

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: pageDatas.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: _tabBar(),
        ),
        body: Container(
          color: Colors.grey,
        ),
      ),
    );
  }

  DefaultTabController _tabController(){
    return DefaultTabController(
      length: pageDatas.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: _tabBar(),
        ),
        body: Container(
          color: Colors.grey,
        ),
      ),
    );
  }

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicator: UnderlineTabIndicator(
        borderSide: BorderSide(
          color: Colors.red,
          width: 3
        ),
      ),
    );
  }

  List <Widget> _tabs(){
    List <Widget> tabList = [];
    pageDatas.forEach((page) {
      tabList.add(
        Tab(text: page["title"],),
      );
    });
    print(tabList);
    return tabList;
  }
}

tabbar custom data.png

注意：isScrollable 默认为 false，设置为 true 才可以滑动，否则数据过多时，可能会自适应效果，导致 title 被挤压。

4.4 indicatorColor, indicatorWeight

设置 indicator 颜色和宽度

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 15,
    );
  }

tabbar indicator color weight.png

4.5 indicatorSize

使用 indicatorSize 修改 indicator 大小。

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 15,
      indicatorSize: TabBarIndicatorSize.label,
    );
  }

tabbar indicator size.png

4.6 indicatorPadding

使用 indicatorPadding 修改 indicator 的位置。

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 15,
      indicatorSize: TabBarIndicatorSize.label,
      indicatorPadding: EdgeInsets.only(bottom: 15),
    );
  }

tabbar indicator indicatorPadding.png

4.7 indicator

使用 indicator 属性自定义 indicator。
注意：此时会优先执行自定义的 indicator，其他的设置会被覆盖掉。

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 15,
      indicatorSize: TabBarIndicatorSize.label,
      indicatorPadding: EdgeInsets.only(bottom: 15),
      indicator: UnderlineTabIndicator(
        borderSide: BorderSide(
          color: Colors.red,
          width: 3
        ),
      ),
    );
  }

tabbar custom indicator.png

4.8 字体颜色大小设置

具体描述见上方表格。

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 5,
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Colors.yellow,
      labelStyle: TextStyle(
        fontSize: 15,
      ),
      unselectedLabelColor: Colors.black,
      unselectedLabelStyle: TextStyle(
        fontSize: 12
      ),
      // indicatorPadding: EdgeInsets.only(bottom: 15),
      // indicator: UnderlineTabIndicator(
      //   borderSide: BorderSide(
      //     color: Colors.red,
      //     width: 3
      //   ),
      // ),
    );
  }

tabbar title colors.png

4.9 labelPadding

使用 labelPadding 来改变 label 位置。

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 5,
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Colors.yellow,
      labelStyle: TextStyle(
        fontSize: 15,
      ),
      unselectedLabelColor: Colors.black,
      unselectedLabelStyle: TextStyle(
        fontSize: 12
      ),
      labelPadding: EdgeInsets.only(top: 30,left: 15),
      // indicatorPadding: EdgeInsets.only(bottom: 15),
      // indicator: UnderlineTabIndicator(
      //   borderSide: BorderSide(
      //     color: Colors.red,
      //     width: 3
      //   ),
      // ),
    );
  }

tabbar labelPadding.png

4.10 onTap 点击事件

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 5,
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Colors.yellow,
      labelStyle: TextStyle(
        fontSize: 15,
      ),
      unselectedLabelColor: Colors.black,
      unselectedLabelStyle: TextStyle(
        fontSize: 12
      ),
      labelPadding: EdgeInsets.only(top: 30,left: 15),
      // indicatorPadding: EdgeInsets.only(bottom: 15),
      // indicator: UnderlineTabIndicator(
      //   borderSide: BorderSide(
      //     color: Colors.red,
      //     width: 3
      //   ),
      // ),

      onTap: (index){
        print("点击了 index = ${index}");
      },
    );
  }

tabbar ontap.png

5. 技术小结

TabBar 的使用可能会面临很多报错，不要着急。
TabBar 的 tabs 数量一定要与 TabController 的 length 相同。
其他的一些属性配置其实不难，多加练习。

Flutter入门（16）：Flutter 组件之 TabBar 详解