带有命名路线的持久导航栏不稳定？ [英] Flutter persistent navigation bar with named routes?

问题描述

我一直在寻找Flutter的一个很好的导航/路由器示例，但是我没有找到一个例子。

I've been searching around for a good navigation/router example for Flutter but I have not managed to find one.

我想要实现的非常简单：

What I want to achieve is very simple:

1. 持久的底部导航栏，突出显示当前的顶级路线


2. 命名路线，这样我就可以从应用程序内的任何位置导航到任何路线


3. Navigator.pop应该始终将我带到我以前所在的视图

BottomNavigationBar的官方Flutter演示达到1，但后退按钮和路由无效。 PageView和TabView的相同问题。还有许多其他教程可以通过实现MaterialApp路线来实现2和3，但是它们似乎都没有持久的导航栏。

The official Flutter demo for BottomNavigationBar achieves 1 but back button and routing dont't work. Same problem with PageView and TabView. There are many other tutorials that achieve 2 and 3 by implementing MaterialApp routes but none of them seem to have a persistent navigation bar.

是否有任何导航系统示例可以会满足所有这些要求吗？

Are there any examples of a navigation system that would satisfy all these requirements?

推荐答案

使用自定义的导航器。

Flutter团队做了视频，其关注的文章在这里： https://medium.com/flutter/getting-to-the-bottom-of-navigation-in- flutter-b3e440b9386

The Flutter team did a video on this, and the article they followed is here: https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

基本上，您需要将脚手架的主体包装在自定义的 Navigator ：

Basically, you will need to wrap the body of your Scaffold in a custom Navigator:

class _MainScreenState extends State<MainScreen> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          // Manage your route names here
          switch (settings.name) {
            case '/':
              builder = (BuildContext context) => HomePage();
              break;
            case '/page1':
              builder = (BuildContext context) => Page1();
              break;
            case '/page2':
              builder = (BuildContext context) => Page2();
              break;
            default:
              throw Exception('Invalid route: ${settings.name}');
          }
          // You can also return a PageRouteBuilder and
          // define custom transitions between pages
          return MaterialPageRoute(
            builder: builder,
            settings: settings,
          );
        },
      ),
      bottomNavigationBar: _yourBottomNavigationBar,
    );
  }
}

在底部导航栏中，导航至新在新的自定义 Navigator 屏幕中，您只需调用以下命令即可：

Within your bottom navigation bar, to navigate to a new screen in the new custom Navigator, you just have to call this:

_navigatorKey.currentState.pushNamed('/yourRouteName');

要达到第三个要求，即 Navigator.pop 带您到上一个视图，您将需要使用 WillPopScope 包装自定义的 Navigator ：

To achieve the 3rd requirement, which is Navigator.pop taking you to the previous view, you will need to wrap the custom Navigator with a WillPopScope:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: WillPopScope(
      onWillPop: () async {
        if (_navigatorKey.currentState.canPop()) {
          _navigatorKey.currentState.pop();
          return false;
        }
        return true;
      },
      child: Navigator(
        // ...
      ),
    ),
    bottomNavigationBar: _yourBottomNavigationBar,
  );
}

应该就是这样！无需手动处理弹出窗口或管理自定义历史记录列表。

And that should be it! No need to manually handle pop or manage a custom history list.

这篇关于带有命名路线的持久导航栏不稳定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！