如何使用 onGenerateRoute 将 BottomNavigationBar 持久化到屏幕？答案

【问题标题】：How to persist a BottomNavigationBar across to screens using onGenerateRoute?如何使用 onGenerateRoute 将 BottomNavigationBar 持久化到屏幕？
【发布时间】：2020-06-04 10:07:32
【问题描述】：

我正在尝试实现一个简单的 BottomNavigationBar 来浏览我动态生成的屏幕。

拥有 React.js 背景，我想在我的屏幕周围使用某种包装器，其中包含 BottomNavigationBar 并根据当前路线将屏幕呈现为子级。但是，在定义 MaterialApp 小部件时，无法附加一个子元素，以便存在 BottomNavigationBar 并以某种方式环绕来自 onGenerateRoute 的屏幕。我看到的唯一另一种方法是将我的 BottomNavigationBar 作为 Scaffold 中的 bottomNavigationBar 属性传递到每个屏幕。但这似乎不是最佳做法。

这是我的路由器：

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;

    switch (settings.name) {
      case '/':
        return MaterialPageRoute(
          builder: (BuildContext context) => Home(),
        );
      default:
        return MaterialPageRoute(
          builder: (BuildContext context) => Error(),
        );
    }
  }
}

我传递给 MaterialApp 小部件的 onGenerateRoute 属性的路由器：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: Router.generateRoute,
    );
  }
}

【问题讨论】：

您可能应该在 Home 中有一个带有 BottomNavigationBar 的页面。从该栏可访问的页面应使用 PageView 显示。不要为每个页面创建路由，将导航栏可到达的所有页面都放入一个 PageView 中，并根据在导航栏上点击的内容显示它们。
@Bob，我在寻找使用 BottomNavigationBar 的方法时看到了一些 PageView 实现，但我认为有一种方法可以坚持使用 onGenereateRoute 。所以，目前，我需要根据我的 UI 方式使用不同的路由技术，对吧？
如果你想保留不同的路线，我能想到的唯一解决方案是为底部导航栏制作一个单独的小部件（只是为了避免在每个屏幕上复制和粘贴它的实现），以某种方式保持跟踪导航栏中当前按下的内容并在每个屏幕上使用该小部件。我知道有一些方法可以监听当前路线的变化，但不知道如何将其链接到底部导航栏

标签： flutter flutter-navigation

【解决方案1】：

您可能希望通过CupertinoTabBar 查看CupertinoTabScaffold。显然，他们遵循 Apple 的设计理念，每个选项卡都有自己的导航器。然后，即使您从一个标签的“主”页面导航到新页面到新/子路径，标签栏也应该保持不变。它们也可以在 MaterialApp 中使用，所以这应该不是问题。

我自己也在努力解决这个问题，因为我将一些非常复杂的数据传递给一些生成的路由，并且我使用自定义的 BottomAppBar 进行设计，当我点击标签。如果这是您要克服的问题，那么抱歉，我还没有答案...如果您要完成此任务，我将删除我的答案/更新，如果我发现了到时候回答！

【讨论】：