Flutter仿闲鱼底部导航栏实现

微信公众号：[程序员指北] 关注可了解更多的教程及排版技巧。问题或建议，请公众号留言;

转载请注明出处: learnandfish.com/

概述

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

效果图

仿闲鱼底部导航栏

要实现闲鱼底部导航栏的效果咱们须要使用到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方法进行刷新界面的。

完整的代码暂时没有上传仓库，若有须要能够后台留言，我会发给你。后期会上传仓库。

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