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 {
  @override
  State<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方法进行刷新界面的。

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

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