Hello, Flutter(4)——TabBar，实现简单的Tab切换

前言：《Hello, Flutter》是我近期的一个写作计划。我的目标是写一篇篇简短的教程，提供给Flutter的初级用户，让他们能够快速掌握Flutter开发。代码地址：https://github.com/flycash/hello_flutter

今天来实现一个简单的功能，就是Tab切换——类似于微信下面的Tab栏。

每一次点击下面的tab，都会切换到不同的页面。

一般而言，实现这个功能需要三个部分：

1. TabController；
2. TabBar;
3. TabBarView;

后两者是通过第一者来进行通信和协调的：

TabBarController

首先我们要准备一个controller。

这里有几个地方是之前的文章没有涉及的。第一个是initState方法。一般了来说，会将跟组件或者数据的初始化放在这里。

第二个是dispose方法，这个方法会在元素被移除出render tree的时候调用。简单理解就是类似于java里面的finalize方法，又或者是c++里面的析构函数。

TabBar和TabBarView

因为在构造controller的时候我们已经指定了tab有多少个，所以这里就构造为之前指定的两个。

同样，我们也构造了两个TabBarView。

效果如图：

基本上看不清下面的tab，我们改一下tab的颜色：

效果就好看多了：

总体上来说，现在实现这种tab切换在flutter里面真的是很简单的了。