Flutter持久化底部导航栏插件persistent_bottom_nav_bar的使用

描述

persistent_bottom_nav_bar 是一个Flutter库，用于创建持久/静态的底部导航栏。它提供了丰富的自定义选项，并支持多种样式和功能。

特点

• 高度可定制：你可以根据需要调整底部导航栏的外观。
• 屏幕推送控制：可以推送新的屏幕并选择是否显示底部导航栏。
• 20种样式：提供多种预设样式供你选择。
• 透明度支持：特定标签页中导航栏可以设置为半透明。
• 动画图标：支持带有动画效果的图标。
• 处理返回键：自动处理安卓设备上的硬件或软件返回键。
• 更多特性：包括基于iOS风格的导航栏、自定义样式等。

快速开始

添加依赖

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

dependencies:
  persistent_bottom_nav_bar: any

导入库

然后在Dart代码中导入此库：

import 'package:persistent_bottom_nav_bar/persistent_bottom_nav_bar.dart';

初始化控制器

声明并初始化一个PersistentTabController来管理当前选中的标签页：

PersistentTabController _controller = PersistentTabController(initialIndex: 0);

创建主应用界面

使用PersistentTabView作为主容器，其中包含要显示的不同页面以及对应的底部导航项。

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: _controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      handleAndroidBackButtonPress: true, // 默认值为true
      resizeToAvoidBottomInset: true,     // 当键盘弹出时是否调整布局，默认为true
      stateManagement: true,               // 是否启用状态管理，默认为true
      hideNavigationBarWhenKeyboardAppears: true,
      popBehaviorOnSelectedNavBarItemPress: PopActionScreensType.all,
      padding: const EdgeInsets.only(top: 8),
      backgroundColor: Colors.grey.shade900,
      isVisible: true,
      animationSettings: const NavBarAnimationSettings(
        navBarItemAnimation: ItemAnimationSettings(
          duration: Duration(milliseconds: 400),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimationSettings(
          animateTabTransition: true,
          duration: Duration(milliseconds: 200),
          screenTransitionAnimationType: ScreenTransitionAnimationType.fadeIn,
        ),
      ),
      confineToSafeArea: true,
      navBarHeight: kBottomNavigationBarHeight,
      navBarStyle: _navBarStyle, // 根据需要选择导航栏样式
    );
  }
}

定义页面列表与导航项

分别定义每个标签页对应的页面(_buildScreens)及它们的导航栏项(_navBarsItems)。

List<Widget> _buildScreens() {
  return [
    MainScreen(),
    SettingsScreen()
  ];
}

List<PersistentBottomNavBarItem> _navBarsItems() {
  return [
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.home),
      title: "Home",
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
      scrollController: _scrollController1,
      routeAndNavigatorSettings: RouteAndNavigatorSettings(
        initialRoute: "/",
        routes: {
          "/first": (final context) => const MainScreen2(),
          "/second": (final context) => const MainScreen3(),
        },
      ),
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.settings),
      title: "Settings",
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
      scrollController: _scrollController2,
      routeAndNavigatorSettings: RouteAndNavigatorSettings(
        initialRoute: "/",
        routes: {
          "/first": (final context) => const MainScreen2(),
          "/second": (final context) => const MainScreen3(),
        },
      ),
    ),
  ];
}

导航函数

对于新页面的推送，可以使用提供的专用方法，这些方法允许你指定是否要在新页面上显示底部导航栏。

PersistentNavBarNavigator.pushNewScreen(
  context,
  screen: MainScreen(),
  withNavBar: true, // 可选参数，默认为true
  pageTransitionAnimation: PageTransitionAnimation.cupertino,
);

或者通过路由设置进行更复杂的操作：

PersistentNavBarNavigator.pushNewScreenWithRouteSettings(
  context,
  settings: RouteSettings(name: MainScreen.routeName),
  screen: MainScreen(),
  withNavBar: true,
  pageTransitionAnimation: PageTransitionAnimation.cupertino,
);

此外还有其他辅助函数如pushDynamicScreen用于推送模态窗口，popUntilFirstScreenOnSelectedTabScreen用于返回到选定标签的第一个页面等。

自定义导航栏样式

如果想要创建独特的导航栏外观，可以通过实现自己的小部件来替换默认样式，并将其实例传递给PersistentTabView中的customWidget属性。

class CustomNavBarWidget extends StatelessWidget {
  final int selectedIndex;
  final List<PersistentBottomNavBarItem> items;
  final ValueChanged<int> onItemSelected;

  CustomNavBarWidget({
    Key key,
    this.selectedIndex,
    @required this.items,
    this.onItemSelected,
  }) : super(key: key);

  Widget _buildItem(PersistentBottomNavBarItem item, bool isSelected) {
    return Container(
      alignment: Alignment.center,
      height: 60.0,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: IconTheme(
              data: IconThemeData(
                size: 26.0,
                color: isSelected
                    ? (item.activeColorSecondary ?? item.activeColorPrimary)
                    : item.inactiveColorPrimary,
              ),
              child: item.icon,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 5.0),
            child: Material(
              type: MaterialType.transparency,
              child: FittedBox(
                child: Text(
                  item.title,
                  style: TextStyle(
                    color: isSelected
                        ? (item.activeColorSecondary ?? item.activeColorPrimary)
                        : item.inactiveColorPrimary,
                    fontWeight: FontWeight.w400,
                    fontSize: 12.0,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Container(
        width: double.infinity,
        height: 60.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: items.map((item) {
            int index = items.indexOf(item);
            return Flexible(
              child: GestureDetector(
                onTap: () {
                  this.onItemSelected(index);
                },
                child: _buildItem(item, selectedIndex == index),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

最后，在PersistentTabView中使用这个自定义的小部件：

PersistentTabView.custom(
  context,
  controller: _controller,
  screens: ...,
  itemCount: 5,
  customWidget: CustomNavBarWidget(
    items: _navBarsItems(),
    selectedIndex: _controller.index,
    onItemSelected: (index) {
      setState(() {
        _controller.index = index; // 这一步很重要！不要遗漏
      });
    },
  ),
  ...
);

以上就是关于如何在Flutter项目中使用persistent_bottom_nav_bar插件的基本介绍和示例代码。希望这能帮助你在应用程序中实现稳定且美观的底部导航体验。