概述
本文主要实现一个仿闲鱼底部导航栏实现，这种效果在项目中经常用到，接下来我们就从头开始实现。
仿闲鱼底部导航栏
要实现闲鱼底部导航栏的效果我们需要使用到BottomNavigationBar和FloatingActionButton,前面我们说过FloatingActionButton
这个组件，接下来我们先说一下BottomNavigationBar这个组件。
BottomNavigationBar
BottomNavigationBar是属于Scaffold中的一个位于页面底部的组件。通常和BottomNavigationBarItem配合使用。
其中BottomNavigationBarItem是BottomNavigationBar的子选项。
BottomNavigationBar构造方法及常用属性简介
BottomNavigationBar({Key key,@required this.items,this.onTap,this.currentIndex = 0,BottomNavigationBarType type,this.iconSize = 24.0,Color selectedItemColor,this.unselectedItemColor,});
BottomNavigationBarItem构造方法及常用属性简介
该组件配合BottomNavigationBar使用，用作底部导航栏要显示的子项，由图标和文字组成。
const BottomNavigationBarItem({@required this.icon,this.title,Widget activeIcon,this.backgroundColor,});
接下来我们开始实现仿闲鱼底部导航栏的效果，一般来讲，点击底部导航栏都会进行页面切换或者更新数据，需要动态的改变一些
页面状态，所以我们需要继承StatefulWidget。
class BottomNavigationPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _BottomNavigationPageState();}}
接下来，我们需要准备导航栏要显示的子项和点击每个子项对应的界面。
// 切换底部导航栏需要跳转的页面final pages = <Widget>[HomePage(),SecondPage(),ThirdPage(),FourPage(),FivePage()];// 底部导航栏要显示的所有子项final List<BottomNavigationBarItem> bottomNavBarItems = [BottomNavigationBarItem(icon: Icon(Icons.home),title: Text("闲鱼")),BottomNavigationBarItem(icon: Icon(Icons.blur_circular),title: Text("鱼塘")),BottomNavigationBarItem(icon: Icon(Icons.add),title: Text("卖闲置")),BottomNavigationBarItem(icon: Icon(Icons.message),title: Text("消息")),BottomNavigationBarItem(icon: Icon(Icons.person),title: Text("我的")),];
为了方便显示，在每个界面在页面中间都只显示一个text文本。这些都准备完成之后，直接在BottomNavigationPage页面的
Scaffold中使用bottomNavigationBar，然后指定items，type等属性即可。
Scaffold(appBar: AppBar(title: Text("底部导航栏页面"),),body: pages[this._currentIndex],bottomNavigationBar: BottomNavigationBar(items: bottomNavBarItems,onTap: _changePage,currentIndex: this._currentIndex,type: BottomNavigationBarType.fixed, ),
至此，基本的底部导航栏功能已经实现，但是，此处有一个必须注意的点，BottomNavigationBar如果子项超过4个，不指定type类型
的话，默认为BottomNavigationBarType.shifting类型，不超过4个为BottomNavigationBarType.fixed类型，超过了4个，如果
不指定type: BottomNavigationBarType.fixed的话，底部导航栏颜色会消失，此坑需要注意。
优化
细心的同学可能发现这和闲鱼也不像啊，没有中间的悬浮加号，接下来我们通过Scaffold中floatingActionButton属性进行实现。
Scaffold(appBar: AppBar(title: Text("底部导航栏页面"),),body: pages[this._currentIndex],bottomNavigationBar: BottomNavigationBar(items: bottomNavBarItems,onTap: _changePage,currentIndex: this._currentIndex,type: BottomNavigationBarType.fixed,),floatingActionButton: FloatingActionButton(child: Icon(Icons.add,size: 36,),onPressed: _pressAdd,backgroundColor: Colors.yellow,foregroundColor: Colors.black,),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,);
上述floatingActionButtonLocation是为了指定FloatingActionButton按钮位置的，centerDocked值正好实现了我们
需要的效果，其他值大家可以自行尝试一下。
其中_changePage和_pressAdd方法都是为了更改当前下标值进行刷新界面的，都是通过setState方法进行刷新界面的。
完整的代码暂时没有上传仓库，如有需要可以后台留言，我会发给你。后期会上传仓库。
感谢大家的阅读，你的阅读是我前进的动力。
