Flutter底部导航栏插件botton_nav_bar的使用

概述

botton_nav_bar 库是一个自定义实现的 Flutter 底部导航栏。该库提供了一个可定制的底部导航栏小部件，允许用户在应用程序的不同屏幕之间进行导航。它设计灵活，可以适应任何应用的设计。

botton_nav_bar 库包含两个主要类：

• BottomBarItem: 一个表示底部导航栏单个项目的模型类。BottomBarItem 类具有多个参数，包括当项目被选中时要显示的屏幕、未选中时要显示的图标、选中时要显示的图标以及要为项目显示的标签。

• BottomNavBar: 一个表示底部导航栏的状态小部件。BottomNavBar 小部件接受一个 BottomBarItem 对象列表作为输入，并将它们显示为一行项目。该小部件还包括一个可以自定义图标的浮动操作按钮。

BottomNavBar 小部件允许用户自定义底部导航栏的多个方面，包括图标的大小和颜色、浮动操作按钮的位置以及项目标签的字体粗细。

BottomBarItem 参数

BottomBarItem 类具有以下参数：

BottomBarItem({
  required Widget screen,
  required Widget icon,
  required String label,
  required IconData selectedIcon,
  Color bottomItemSelectedColor = Colors.blue,
  Color bottomItemUnSelectedColor = Colors.grey,
  double bottomNavItemSelectedIconSize = 24,
  double bottomNavItemunSelectedIconSize = 24,
  double bottomNavItemSelectedLabelSize = 12,
  double bottomNavItemunSelectedLabelSize = 12,
  double bottomNavItemLabelHeight = 30,
  double bottomNavItemIconHeight = 24,
  double bottomNavItemHeight = 60,
  FontWeight bottomItemLabelFontWeight = FontWeight.bold,
})

• screen: 当此项目被选中时应显示的屏幕。
• icon: 此项目的未选中图标。
• label: 要在此项目下方显示的标签。
• selectedIcon: 该项目选中时的图标。
• bottomItemSelectedColor: 选中项目在底部导航栏中的颜色。
• bottomItemUnSelectedColor: 未选中项目在底部导航栏中的颜色。
• bottomNavItemSelectedIconSize: 底部导航栏项目选中时图标的大小。
• bottomNavItemunSelectedIconSize: 底部导航栏项目未选中时图标的大小。
• bottomNavItemSelectedLabelSize: 底部导航栏项目选中时标签的字体大小。
• bottomNavItemunSelectedLabelSize: 底部导航栏项目未选中时标签的字体大小。
• bottomNavItemLabelHeight: 底部导航栏项目标签的高度。
• bottomNavItemIconHeight: 底部导航栏项目图标的高度。
• bottomNavItemHeight: 底部导航栏项目的高度。
• bottomItemLabelFontWeight: 底部导航栏项目标签的字体粗细。

特性

• 可自定义的底部导航栏。
• 支持浮动操作按钮。
• 易于实现。
• 带有演示应用。

开始使用

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  botton_nav_bar: ^1.0.1

然后运行 flutter pub get 来安装依赖项。

示例代码

不带凹槽的底部导航栏

import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  [@override](/user/override)
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Widget>(
        future: _getScreen(_currentIndex),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return snapshot.data;
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
            _pageController.animateToPage(index, duration: Duration(milliseconds: 300), curve: Curves.ease);
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }

  Future<Widget> _getScreen(int index) async {
    switch (index) {
      case 0:
        return Text('Home Screen');
      case 1:
        return Text('Search Screen');
      case 2:
        return Text('Profile Screen');
      default:
        return Text('Home Screen');
    }
  }
}

带凹槽的底部导航栏

import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  [@override](/user/override)
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Widget>(
        future: _getScreen(_currentIndex),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return snapshot.data;
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      bottomNavigationBar: BottomNavBar(
        fabChild: Text(
          'scan',
          style: TextStyle(color: Colors.amber),
        ),
        notchedRadius: 30,
        centerNotched: true,
        fabIcon: Icon(Icons.qr_code),
        bottomItems: [
          BottomBarItem(
            bottomItemSelectedColor: Colors.green,
            label: 'Screen 1',
            screen: Center(child: Text('A')),
            selectedIcon: Icons.collections_bookmark_outlined,
          ),
          BottomBarItem(
            bottomItemSelectedColor: Colors.green,
            label: 'Screen 2',
            screen: Center(child: Text('B')),
            selectedIcon: Icons.search_rounded,
          ),
          BottomBarItem(
            bottomItemSelectedColor: Colors.green,
            label: 'Screen 3',
            selectedIcon: Icons.menu_open_rounded,
            screen: Center(child: Text('C')),
          ),
          BottomBarItem(
            bottomItemSelectedColor: Colors.green,
            label: 'Screen 4',
            screen: Center(child: Text('D')),
            selectedIcon: Icons.notifications_active,
          )
        ],
      ),
    );
  }

  Future<Widget> _getScreen(int index) async {
    switch (index) {
      case 0:
        return Text('Screen 1');
      case 1:
        return Text('Screen 2');
      case 2:
        return Text('Screen 3');
      case 3:
        return Text('Screen 4');
      default:
        return Text('Screen 1');
    }
  }
}