[Flutter Widget] TabBar

前言

后台留言说这个Widget没有讲到，好吧今天就把TabBar吧。

TabBar在客户端的表现形式是一般展示在appBar的下面，做同一级别不同类型界面的展示工作。

确实，在平时我们的应用中是非常常见的，所以讲一下也不过分哈。

TabBar

还是首先来你看下构造方法吧

其中只有tabs参数势必须的，其他的参数都会根据你app的主题曲自动设置相应的参数。

那么这个Tab又是什么东西呢？我们还是再来看下Tab的构造方法吧

相比于TabBar，Tab这个WIdget就显得非常简单，他就是一个最基本的组件，我们 可以选择性的填入text，icon或者子Widget。

我们仅仅使用这两个组件就可以显示一个TabBar可以了，但是如果想要做到TabBar与下面内容区域的关联还需要用到TabView这个Widget哦。

TabView实际上就是用来关联Tab与内容区域的一个中间件。

今天我们来看个官方的例子（不要问我为什么用官方例子，我懒啊……）

看个官方例子

官方这个例子能够很好说明下这个TabBar的用法。

首先，我们建立了一个Choice对象，有title和icon两个属性

然后我们初始化List数据，这样我们就拿到了一个长度为6的List数据

然后我们定义了一个内容区域的Widget，并根据传递来的Choice对象来初始化Widget

最后在TabbedAppBarSample Wdiget中，我们通过构建的choices数据创建Tab并且通过TabView关联ChoiceCard，这样一来我们就可以根据下面内容区域的滑动来更新tab的显示或者根据tab选中的变化来更新下面的内容区域了。

那么，还是来看下效果吧：

试一试其他参数

接下来，我们来尝试修改下TabBar选中时的指示器颜色。

我们单单给TabBar加了个 indicatorColor: Colors.red,我们再来看下效果。

可以看到，TabBar的指示器颜色已经变成了红色

那么接下来我们来设置下上面文字来图标选中时和未选中时的颜色

labelColor: Colors.orange, unselectedLabelColor: Colors.white,

我们依旧仅仅给TabBar加上上面的参数再来看下效果

小结

使用TabBar、Tab、TabView可以很方便的实现页签切换效果，在官方这个例子中，把对象、数据初始化和自定义Widget都写在了一个文件中，这样大家看起来可能会比较不好理解，大家可以把这个逻辑都抽离出到单独的文件中再去看就比较好理解了。

我怀疑这个是个坏掉的二维码，分享到朋友圈试试？