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

我想要实现的很简单:

1. 突出显示当前顶级路线的持久底部导航栏
2. 命名路线，以便我可以从应用内的任何位置导航到任何路线
3. Navigator.pop 应始终将我带到我之前所在的 View

BottomNavigationBar 官方 Flutter demo 实现了 1 但后退按钮和路由不起作用。 PageView 和 TabView 也有同样的问题。还有许多其他教程通过实现 MaterialApp 路由实现了 2 和 3，但它们似乎都没有持久导航栏。

是否有可以满足所有这些要求的导航系统示例？

最佳答案

您的所有 3 个要求都可以通过使用自定义 Navigator 来实现.

Flutter 团队做了一个 video关于这一点，他们关注的文章在这里:https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

基本上，您需要将 Scaffold 的主体包裹在自定义 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 中导航到新屏幕，您只需调用以下代码:

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

要实现第三个要求，即 Navigator.pop 将您带到上一个 View ，您需要用 WillPopScopeNavigator/:

@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,
  );
}

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

https://stackoverflow.com/questions/49681415/