第四十八回：TabBar Widget

我们在上一章回中介绍了MaterialApp Widget相关的内容,本章回中将介绍 TabBar Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的TabBar Widget是指屏幕顶部的标签，通常情况下在一个界面的顶部有多个标签，点击这些标签可以切换到不同的页面。TabBar也是MaterialApp的一个设计特色，本章回将详细介绍它的使用方法。

使用方法

和其它的Widget一样，TabBar Widget提供了相关的属性来控制自己，下面是常用的属性：

• tabs属性：该属性类似容器类组件的children属性，主要用来存放标签组件，数量不限；
• labelColor属性：该属性主要用来控制标签标签被选中时颜色；
• indicatorColor属性：该属性主要用来控制标签被选中时下面指示器的颜色;
• unselectedLabeColor属性：该属性主要用来控制标签未被选中时下面指示器的颜色;
• onTap属性：该属性是方法类型，当标签被选中时将会调用该属性对应的方法；

上面的这些属性中只有第一个属性是必选属性，其它属性都是可选属性。第一个属性中标签的数量虽然没有做限定，但是最好不超过五个，要不然就会比较难看，毕竟界面的宽度是有限的。

关于颜色的几个属性大家不可以依据界面的颜色自行设定，不过要保证标签和指示器的颜色保持一致，选中和未选中时的颜色保持一致，这样可以保证从颜色上区分开哪些标签被选中了，哪些标签没有被选中。

onTap属性是方法类型，访方法的参数是标签的索引值，默认从0开始。

示例代码

Scaffold(
  appBar: AppBar(
        title: Text("Example of Material App"),
        bottom: TabBar(
          labelColor: Colors.green,
          indicatorColor: Colors.green,
          unselectedLabelColor: Colors.grey,
          onTap: (index){
            print("$index is selected");
          },
          tabs: const [
            Icon(Icons.web),
            Icon(Icons.favorite),
            Icon(Icons.self_improvement),
          ],
        ),
      ),
      body:，//省略不写
  ),

上面的示例代码中创建了一个包含三个标签的界面，每个标签显示不同的图标。点击标签时会切换标签，同时标签中图标的颜色也会发生变化，而且会回调onTap属性对应的方法。我们在该方法中打印出了被选中标签的索引值。建议大家动手去实践，我在这里就不演示程序的运行结果了。
最后，我强调一下两个需要注意的细节：

• TabBar组件不能单独使用必须赋值给AppBar的bottom属性才可以，这个在代码中可以看出来；
• TabBar组件必须配合TabBarController(后面章回中介绍)组件一起使用，不然会发生运行时错误;

看官们，关于TabBar Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!