Flutter bottomNavigationBar和DefaultTabController实战

这是转载自简书星星编程的一篇博文，感谢分享。

本文通过一个案例，展示了Flutter通过bottomNavigationBar和DefaultTabController组件实现底部tab栏和顶部tab栏的实现：

下图是最终效果：


可以看到，顶部有搜索框和tabbar，使用了自定义AppBar配合DefaultTabController实现，底部为常见的bottomNavigationBar tab栏。

一、通过bottomNavigationBar实现底部：
    重新build方法会返回一个Scaffold组件，在这个组件下面添加底部导航属性bottomNavigationBar，onTap事件实现点击底部导航栏页面之间的切换和状态改变。因为界面有变化，所以这里使用的是动态组件StatefulWidget。     _bottomTabs是定义的底部Tabbar的List<BottomNavigationBarItem>，包含了Tabbar的每个item。item有默认icon和选择的activeIcon，这里使用的都是加载的本地图片，加载本地图片需要以下配置。

    1、以当前Demo为例，建立一个assets文件夹images,下面建2.0x和3.0x两个文件夹，用来放2倍图和3倍图，另外直接在images文件夹下放一倍图。


    2、需要在pubspec.yaml文件中声明每张图片。


    3、Tabbar每个item的icon和activeIcon加载本地图。     _tabs是Tabbar所有页面的集合：     在initState初始化currentPage，显示首页：     切换Tabbar实现onTap刷新状态并更改currentPage渲染页面。

二、顶部Tabbar
    顶部Tabbar相对于底部Tabbar简单一些，顶部Tabbar切换时不需要手动改变状态，所以这里使用StatelessWidget。顶部Tabbar使用DefaultTabController组件，声明切换item的个数length属性，并保证与tabs和TabBarView的个数一致，否则会报错。
    AppBar组件下的Title也是一个组件，这里添加一个自定义的搜索组件SearchTextFieldWidget，这里就不过多介绍了。