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,
  });

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

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

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

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

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

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