第五十回：TabBarView Widget

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

概念介绍

我们这里介绍的TabBarView类似前面章回中介绍过的PageView组件，它提供了一组界面，并且配合TabBar和TabController一起使用，这样可以让用户通过选择不同的标签(Tab)来切换不同的界面，当然也可以像PageView一样通过左右滑动来切换界面。本章回中将详细介绍它的使用方法。

使用方法

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

• children属性：该属性用来存放不同的界面，数量不限；
• controller属性：用来设置TabBarController，可以不写而是像上一章回一样使用；

这两个属性中children属性是必选属性，它可以像Row组件一样包含其它的组件，虽然组件的数量没有限制，但是最好与TabBarController中的length属性值保持
一致，这样可以保证界面数量和标签(Tab)数量一致.

示例代码

DefaultTabController(
  length: 3,
  initialIndex: 1,
  child: 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:const TabBarView(
        children: [
          Text("First TabBarView"),
          Text("Seconde TabBarView"),
          Text("Third TabBarView"),
        ],
      ),
  ),
),

我们在上面的代码中创建了一个包含三个页面的TabBarView.每个页面中只有一个文本组件，该文本组件只显示当前TabBarView界面的标题。

编译并且运行上面的代码可以看到界面中显示三个标签，点击不同的标签时就会切换到不同的标签页面。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

此外，大家需要注意：TabBarView不能单独使用，需要配合TabBar和TabBarController一起使用。

综合使用

最近几个章回中分别介绍了TabBarView，TabBar和TabBarController组件，它们一起构成了顶部标签导航界面。这也是程序中经常使用的导航界面。

在Flutter中的组件构成了组件树，因此可以把TabBarController当作树根，而TabBar和TabBarView都是树根上的树枝，下面是一个树状图，希望通过图形来帮助大家理解这三种组件相互之间的关系。不过该图是水平的排列的，与树形的垂直排列不同，请大家参考:

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