作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

BottomNavigationBar

BottomNavigationBar 和 BottomNavigationBarItem 配合来独特展现Flutter外面的底部状态栏，底部状态栏是在挪动端很重要的控件。

先看一下 BottomNavigationBar构造方法

BottomNavigationBar({    // key    Key key,    /// BottomNavigationBarItem 数组    @required this.items,    /// 点击事件办法    this.onTap,    /// 以后选中的 元素下标    this.currentIndex = 0,    ///  底部导航栏的Z坐标    this.elevation,    /// 默认是 BottomNavigationBarType.shifting 个别咱们应用 BottomNavigationBarType.fixed    this.type,    /// 选中我的项目色彩的值    Color fixedColor,    /// 背景色彩    this.backgroundColor,    /// BottomNavigationBarItem图标的大小    this.iconSize = 24.0,    /// 选中时图标和文字的色彩    Color selectedItemColor,    /// 未选中时图标和文字的色彩    this.unselectedItemColor,    // 选中时的子Item的款式    this.selectedIconTheme,    /// 未选中时的子Item的款式    this.unselectedIconTheme,    // 选中时字体大小    this.selectedFontSize = 14.0,    /// 未选中时的字体大小    this.unselectedFontSize = 12.0,    /// 选中的时候的字体款式    this.selectedLabelStyle,    /// 未选中时的字体款式    this.unselectedLabelStyle,    /// 是否为未抉择的BottomNavigationBarItem显示标签    this.showSelectedLabels = true,    //// 是否为选定的BottomNavigationBarItem显示标签    this.showUnselectedLabels,    /// pc端或web端应用    this.mouseCursor,})

咱们来做一个点击底部状态栏按钮切换色彩的Demo

class _BottomNavigationBarDemoPageState    extends State<BottomNavigationBarDemoPage> {  int selectedIndex = 0;  List<Container> containerList = [    Container(      color: Colors.red,    ),    Container(      color: Colors.blue,    ),    Container(      color: Colors.yellow,    ),    Container(      color: Colors.green,    )  ];  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        centerTitle: true,        title: Text("BottomNavigationBarDemo"),        backgroundColor: Colors.blue,      ),      body: containerList[selectedIndex],      bottomNavigationBar: BottomNavigationBar(        /// 这个很重要        type: BottomNavigationBarType.fixed,        currentIndex: selectedIndex,        onTap: (index) {          setState(() {            selectedIndex = index;          });        },        items: <BottomNavigationBarItem>[          BottomNavigationBarItem(            title: Text('F1'),            icon: Icon(Icons.home),          ),          BottomNavigationBarItem(            title: Text('F2'),            icon: Icon(Icons.book),          ),          BottomNavigationBarItem(            title: Text('F3'),            icon: Icon(Icons.school),          ),          BottomNavigationBarItem(            title: Text('F4'),            icon: Icon(Icons.perm_identity),          ),        ],      ),    );  }}
  • Scaffold接管一个BottomNavigationBar作为bottomNavigationBar的参数，而后BottomNavigationBar接管一个items的数组，这个数组外面传入了4个BottomNavigationBarItem对象别离命名为F1、F2、F3、F4
  • type参数传入的是BottomNavigationBarType.fixed，默认是BottomNavigationBarType.shifting，默认的成果是 只有在选中BottomNavigationBarItem时才会显示文字。设置成BottomNavigationBarType.fixed非选中状态下也会显示文字和图标
  • onTap实现的是一个办法，参数是被点击的以后BottomNavigationBarItem的下标，在这里被点击后调用setState来刷新页面的色彩

成果如下：

日常开发中以上成果根本能满足大多数需要
如果想要自定义上面Icon的款式，能够应用 BottomAppBar

这里也介绍两个不错的库

  • tab_bar_animation

    链接: https://github.com/tunitowen/...
    成果如下：

  • simpleanimations
    链接: https://github.com/TechieBlos...
    成果如下：

想体验以上的示例的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->bottom_navigation_page.dart查看，并且能够下载下来运行并体验。