Flutter底部导航布局插件 bottom_nav_layout 的使用

简介

bottom_nav_layout 是一个用于构建带有底部导航栏的应用程序的快速布局插件。它消除了所有与底部导航栏协调相关的样板代码，并提供了额外的常见功能，如页面状态保存、懒加载页面、页面过渡动画等。

为什么选择 bottom_nav_layout

• 消除了所有与底部导航栏协调相关的样板代码。
• 提供了额外的常见功能：
  • 页面状态保存
  • 懒加载页面
  • 页面过渡动画
  • 内页导航
  • Android 返回按钮导航
• 支持任何底部导航栏，可以使用 Material 或 Cupertino 底部导航栏，也可以从 pub.dev 获取或使用自己的自定义底部导航栏。
• 可以自定义或关闭任何功能。

使用方法

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  bottom_nav_layout: ^3.0.10

快速开始示例

以下是一个简单的示例，展示了如何使用 bottom_nav_layout 插件创建一个带有底部导航栏的应用程序：

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

void main() => runApp(MaterialApp(
      home: BottomNavLayout(
        // 应用程序的目的地（页面）
        pages: [
          (_) => Center(child: Text("Welcome to bottom_nav_layout")),
          (_) => SliderPage(),
          (_) => Center(child: TextField(decoration: InputDecoration(hintText: 'Go..'))),
        ],
        // 底部导航栏
        bottomNavigationBar: (currentIndex, onTap) => BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) => onTap(index),
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          ],
        ),
      ),
    ));

参数说明

页面状态保存

你可以启用或禁用页面状态保存功能。启用后，页面的状态（如滚动位置、子导航、表单输入等）将被保留。

savePageState: true, // 默认是 false

懒加载页面

你可以设置 lazyLoadPages 为 true，以便在首次导航到页面时才创建页面。这对于包含启动动画或需要运行较重进程的页面非常有用。

lazyLoadPages: true, // 默认是 false

页面回退栈

bottom_nav_layout 记录了页面的导航顺序，并在按下返回按钮时返回到之前访问的页面。

// 默认是 ReorderToFrontPageStack 对于 Android 和 NoPageStack 对于 iOS。
pageStack: ReorderToFrontPageStack(initialPage: 0),

页面过渡动画

你可以设置页面之间的过渡动画。可以使用内置的动画构建器，也可以创建自己的 AnimationBuilder。

// 默认是 null。
pageTransitionData: PageTransitionData(
  builder: PrebuiltAnimationBuilderBuilders.zoomInAndFadeOut,
  duration: 150,
  direction: AnimationDirection.inAndOut,
),

内页导航

每个页面都可以有自己的 Navigator，这样可以实现更复杂的导航模式。例如：

pages: [
  (navKey) => Navigator(
        key: navKey,
        initialRoute: "/",
        onGenerateRoute: (routeSettings) => MaterialPageRoute(
          builder: (context) {
            if (routeSettings.name == "/")
              return OverviewPage();
            else if (routeSettings.name == "/details")
              return DetailsPage();
            else
              return Center(child: Text("Unknown route."));
          },
        ),
      ),
  (_) => SliderPage(),
  (_) => SliderPage(),
],

不同的底部导航栏

bottom_nav_layout 支持任何底部导航栏。例如，使用 flutter_snake_navigationbar：

bottomNavigationBar: (currentIndex, onTap) => SnakeNavigationBar.color(
  currentIndex: currentIndex,
  onTap: (index) => onTap(index),
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
),

示例 Demo

下面是一个完整的示例，展示了如何使用 bottom_nav_layout 创建一个带有底部导航栏的应用程序：

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

class QuickStartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BottomNavLayout(
      pages: [
        (_) => Center(child: Text("Home Page")),
        (_) => Center(child: Text("Slider Page")),
        (_) => Center(child: TextField(decoration: InputDecoration(hintText: 'Search...'))),
      ],
      bottomNavigationBar: (currentIndex, onTap) => BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (index) => onTap(index),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
        ],
      ),
    );
  }
}

void main() => runApp(MaterialApp(
      home: QuickStartExample(),
    ));