Flutter仿闲鱼底部导航栏实现

概述

本文主要实现一个仿闲鱼底部导航栏实现，这种效果在项目中经常用到，接下来我们就从头开始实现。

仿闲鱼底部导航栏

要实现闲鱼底部导航栏的效果我们需要使用到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,});

属性名	属性值类型	说明
items	BottomNavigationBarItem类型的集合	底部导航栏的子显示项
onTap	ValueChanged	点击底部导航栏子显示项的回调，返回的int值为选中子项的下标
currentIndex	int	当前显示项的下标
type	BottomNavigationBarType	包含fixed和shifting类型，显示效果不同
iconSize	double	子项图标的大小

BottomNavigationBarItem构造方法及常用属性简介

该组件配合BottomNavigationBar使用，用作底部导航栏要显示的子项，由图标和文字组成。

const BottomNavigationBarItem({@required this.icon,this.title,Widget activeIcon,this.backgroundColor,});

属性名	属性值类型	说明
icon	Widget	需要显示的图标组件，多为Icon
title	Widget	需要显示的文字组件，多为Text
activeIcon	Widget	选中时显示的icon，多为Icon
backgroundColor	Color	BottomNavigationBarType为shifting时的背景颜色

接下来我们开始实现仿闲鱼底部导航栏的效果，一般来讲，点击底部导航栏都会进行页面切换或者更新数据，需要动态的改变一些
页面状态，所以我们需要继承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方法进行刷新界面的。

完整的代码暂时没有上传仓库，如有需要可以后台留言，我会发给你。后期会上传仓库。

感谢大家的阅读，你的阅读是我前进的动力。