Flutter 通过 TabBar 及 TabBarView 实现 TabLayout+ViewPager效果

如题，使用 Flutter 来实现题目效果要比 Android 原生实现简单一些

先上效果图

 

 

在实现之前，先看一下 Flutter 中 TabBar 及 TabBarView 的属性

 

TabBar

 

TabBarView

好了，现在我们开始吧

一、准备数据和图标

 

数据就是 String 类型的，而图标则是Widget，下文会用到~

二、通过 for 循环，将 TabBar 的 Tab 标签 List 准备好

 

三、定义一个 TabBar 控件，会在下一步引用到

四、用一个默认的 TabController 去将 上一步的 TabBar 包裹住，在这里，为了美观，我们将 TabBar 放置于 Scaffold 脚手架 下方

完工

需要注意的是，我们必须用TabController 将 TabBar 包裹，否则就会报出没有设定 TabController的错误

 

list1 是使用的 Tab 这个控件，这个控件可以方便的设置文本及图标，但是缺点是不能设置图标和文本之间的间距

list2 方式属于自定义 Tab ，这样可以设置图标和文本之间的间距

[源码地址 tag_1_use_icon](https://github.com/guaju/flutter_app_tabbar)