Flutter之BottomNavigationBar的封装

BottomNavigationBar
BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
BottomNavigationBar构造方法：

    BottomNavigationBar({        Key key,        @required this.items,        this.onTap,        this.currentIndex = 0,        this.elevation = 8.0,        BottomNavigationBarType type,        Color fixedColor,        this.backgroundColor,        this.iconSize = 24.0,        Color selectedItemColor,        this.unselectedItemColor,        this.selectedIconTheme = const IconThemeData(),        this.unselectedIconTheme = const IconThemeData(),        this.selectedFontSize = 14.0,        this.unselectedFontSize = 12.0,        this.selectedLabelStyle,        this.unselectedLabelStyle,        this.showSelectedLabels = true,        bool showUnselectedLabels,      })

BottomNavigationBarItem
底部导航栏要显示的Item，有图标和标题组成
BottomNavigationBarItem构造方法：

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

构建BottomNavigationBar

    // 创建底部BottomNavigationBar      BottomNavigationBar _bottomNavigationBar(List <String>titles, List <String>icons){        return  BottomNavigationBar(          items: [            _bottomBarItem(titles[0], icons[0]),            _bottomBarItem(titles[1], icons[1]),            _bottomBarItem(titles[2], icons[2]),            _bottomBarItem(titles[3], icons[3]),          ],          currentIndex: _currentIndex,          type: BottomNavigationBarType.fixed,// 当items大于3时需要设置此类型          onTap: _bottomBarItemClick,          selectedFontSize: 12,        );      }      // 创建item      BottomNavigationBarItem _bottomBarItem(String title, String iconName,) {        return BottomNavigationBarItem(          icon: _image(iconName),          title: Text(title),          activeIcon: _image('${iconName}_select'),          backgroundColor: Colors.white,        );      }      //image      Widget _image(String iconName) {        return Image.asset(          'assets/images/${iconName}@2x.png',// 在项目中添加图片文件夹          width: 24,          height: 24,        );      }      //item点击事件      _bottomBarItemClick(int index) {        setState(() {          _currentIndex = index;        });      }

调用构建方法

    // 当前选中的索引    int _currentIndex = 0;          //item点击事件      _bottomBarItemClick(int index) {        setState(() {          _currentIndex = index;        });      }      // 数据      List titles = <String>['首页', '收藏', '消息', '我的'];      List icons = <String>['tabbar_discover', 'tabbar_favorite', 'tabbar_message', 'tabbar_me'];          @override      Widget build(BuildContext context) {        return Scaffold(          bottomNavigationBar: _bottomNavigationBar(titles, icons),        );      }

样式显示：