bottom_nav_layout
这是一个快速的 Flutter 应用布局，用于构建带有底部导航栏的应用。您可以用 15 行代码得到一个流畅运行的应用。
为什么选择 bottom_nav_layout？
- 消除了底部导航栏协调的所有样板代码。
- 提供额外的常见功能。
- 页面状态保存
- 页面懒加载
- 页面过渡动画
- 页面内导航
- Android 的返回按钮导航
- 适用于任何您想要的底部导航栏。可以使用 Material 或 Cupertino 底部导航栏，从 pub.dev 获取一个 或使用您自己的。
- 您可以自定义或关闭任何功能。
用法
安装
将以下内容添加到您的 pubspec.yaml 文件中。
dependencies:
bottom_nav_layout: latest_version
快速入门示例
import 'package:bottom_nav_layout/bottom_nav_layout.dart';
void main() => runApp(MaterialApp(
home: BottomNavLayout(
// The app's destinations
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'),
],
),
),
));
完成。您现在拥有一个完整的、可运行的应用程序。
参数
| 名称 | 描述 | 默认值 |
|---|---|---|
pages |
应用程序的目标页面。 | 不适用 |
bottomNavigationBar |
布局的底部导航栏。 | 不适用 |
savePageState |
当设置为 false 时，每次导航页面时都会重新初始化页面。（Material 行为）。设置为 true 时，页面仅初始化一次，并在导航时隐藏/显示。（Cupertino 行为） | 假 |
lazyLoadPages |
当设置为 false 时，页面在开始时创建。设置为 true 时，页面在首次导航时创建。 | 假 |
pageStack |
用于记住已访问页面的导航堆栈。增强了 Android 上的返回按钮管理。 | Android 的 ReorderToFrontPageStack，iOS 的 NoPageStack |
extendBody |
传递给 Scaffold.extendBody。 |
假 |
resizeToAvoidBottomInset |
传递给 Scaffold.resizeToAvoidBottomInset。 |
真 |
pageTransitionData |
页面过渡的动画配置。 | 空 |
内部 Widget 树
页面状态保存
您在页面中所做的状态更改，如滚动量、子导航、表单输入等都会被保留。您可以根据 Cupertino 设计指南启用它，或根据 Material Design 指南禁用它。
savePageState: true, // Default is false
页面懒加载
该布局提供了使用传入的页面构建器懒惰创建页面的选项。当 lazyLoadPages 设置为 true 时，页面直到首次导航到时才会被创建。这在非初始页面：
- 具有加载动画时很有用。
- 运行一个直到页面打开才需要的重度进程时很有用。
lazyLoadPages: true, // Default is false
页面返回堆栈
| 文档 | 示例 |
|---|---|
| 文档 | - |
该布局会记住导航页面的顺序，并且在按下返回按钮时，会导航回先前导航的页面。
有许多有用的页面返回堆栈行为已实现，例如 reorder-to-front 和 replace-except-first。您也可以实现自己的。
您也可以在 PageStack 中指定 initialPage。
// Default is ReorderToFrontPageStack for Android and NoPageStack for iOS.
pageStack: ReorderToFrontPageStack(initialPage: 0),
了解更多详情。
页面过渡动画
| 文档 | 示例 |
|---|---|
| - | 示例 |
您可以为页面之间的过渡设置动画。创建您自己的 AnimationBuilder 或使用内置的一个。
这些动画同时适用于底部导航栏和 Android 返回按钮。
// Default is null.
pageTransitionData: PageTransitionData(
builder: PrebuiltAnimationBuilderBuilders.zoomInAndFadeOut,
duration: 150,
direction: AnimationDirection.inAndOut,
),
页面内导航
| 文档 | 示例 |
|---|---|
| 文档 | 示例 |
该布局维护一个 扁平导航模式。
图示：扁平导航
优势
- 每个页面可以使用一个
Navigator。 - Android 返回按钮可以同时在页面内和页面之间进行导航。
- 当重新选择当前导航栏项目时，底部导航栏会弹出所有页面内堆栈。
要实现这一点，页面应该有一个使用传入的 GlobalKey 作为其 key 的 Navigator widget。
不同的底部导航栏
| 文档 | 示例 |
|---|---|
| 文档 | 示例 |
到目前为止，我们只处理了 Material 底部导航栏。该布局支持任何底部导航栏。
使用 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'),
],
),
改进
- 如果您希望在您的应用程序中看到此软件包中存在的/需要的某个功能，请告诉我。我会尽力集成它。
- 我还在考虑做一个 drawer_nav_layout 包。如果您感兴趣，请告诉我！
