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

样式显示 ：