第五十一回：TabBar Widget

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

概念介绍

我们这里介绍的TabBar Widget就是屏幕顶部的标题栏，它位于界面的最上方，经常用来显示页面的标题和一些图标。

如果看官们有Android开发经验，那么可以把它当作Android中的ActionBar。其实在我们的项目中经常使用AppBar，只是没有专门介绍它，本章回中将详细介绍它的使用方法。

使用方法

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

• title属性：主要用来控制标题中显示的内容；
• centerTitle属性：用来控制标题是否居中，默认为居中；
• leading属性：用来显示标题栏左侧的图标；
• actions属性：用来显示标题栏右侧的图标，它类似children属性，可以显示多个图标；
• bottom属性：用来显示标签(Tab),前面章回中介绍过；
• iconTheme属性：用来控制标题栏(AppBar)中所有图标的样式，比如颜色和大小等;
• actionsIconTheme：用来控制actions属性中的图标的样式，其作用和iconTheme属性相同；

上面介绍的这些属性都是可选的，我们可以依据项目实际情况来设置，不过我建议至少设置title属性，用它来指示界面的标题。

给标题栏中的actions属性赋值时建议使用IconButton组件，这样既可以看到图标又可以响应点击事件。下面是示例代码，请大家参考。

示例代码

appBar: AppBar(
  title: Text("Example of Material App"),
  //默认使用系统设置，为true
  centerTitle: false,
  //会控制AppBar内所有的Icon
  iconTheme:const IconThemeData(
    color: Colors.yellow,
    size:40.0,
  ) ,
  //只能控制AppBar内Actions里的Icon
  actionsIconTheme: const IconThemeData(
    color: Colors.green,
    size: 20.0,
  ),
  leading:const Icon(Icons.menu),
  actions: [
    const Icon(Icons.download),
    IconButton(
        onPressed: (){
          print("share value button clicked");
        },
        icon: Icon(Icons.share)),
  ],
  bottom: TabBar(),//省略不写，参考上一章回中的内容
),

在上面的代码中给AppBar设置了标题，并且在标题左侧和右侧分别添加了图标，左侧是常用的菜单图标，右侧是下载和分享图标，其中分享图标是一个按钮，它还可以响应点击事件。此外，我们还调整了图标的颜色和大小，左侧的菜单图标为黄色，右侧的下载和分享图标为绿色，并且尺寸小于左侧的图标。我在这里就不演示程序的运行结果了，建议大家参考Github上ex023文件中的代码去实践。

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