Flutter 嵌套导航器返回 Web

Question

该应用程序有一个嵌套的导航器，如下所示

import 'package:aa/routes.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      initialRoute: root,
      onGenerateRoute: AppRouter.mainRouteSettings,
      navigatorKey: RouteConfig().appRouteKey,
    );
  }
}

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        RouteConfig().main.currentState!.maybePop();
        return false;
      },
      child: Scaffold(
        body: Container(
          margin: const EdgeInsets.all(100),
          decoration: BoxDecoration(
              color: Colors.grey[500], borderRadius: BorderRadius.circular(20)),
          child: Navigator(
            key: RouteConfig().main,
            initialRoute: one,
            onGenerateRoute: AppRouter.generateRoute,
          ),
        ),
      ),
    );
  }
}


import 'package:aa/main.dart';
import 'package:flutter/material.dart';

//Pre
const String root = '/';
const String preRoute = '/preRoute';

const String one = '/';
const String two = '/two';
const String three = '/three';

class RouteConfig {
  static final RouteConfig _routeConfig = RouteConfig._internal();
  factory RouteConfig() {
    return _routeConfig;
  }
  RouteConfig._internal();

  ///App Navigator Key
  GlobalKey<NavigatorState> appRouteKey = GlobalKey<NavigatorState>();

  ///Pre Auth Key
  GlobalKey<NavigatorState> main = GlobalKey<NavigatorState>();
}

class AppRouter {
  static Route mainRouteSettings(RouteSettings settings) {
    late Widget page;

    switch (settings.name) {
      case root:
        page = Scaffold(
          body: Container(
              child: TextButton(
                  onPressed: () => RouteConfig()
                      .appRouteKey
                      .currentState!
                      .pushReplacementNamed(preRoute),
                  child: Center(child: Text('Click Me')))),
        );
        break;
      case preRoute:
        page = Test();
        break;
      default:
        page = const Center(child: Text('Not Found'));
    }

    return MaterialPageRoute<dynamic>(
      builder: (context) {
        return page;
      },
      settings: settings,
    );
  }

  static Route generateRoute(RouteSettings settings) {
    late Widget page;

    print(settings.name);

    switch (settings.name) {
      case one:
        page = Builder(builder: (context) {
          return WillPopScope(
            onWillPop: () async => !Navigator.of(context).userGestureInProgress,
            child: Container(
              color: Colors.pink,
              margin: const EdgeInsets.all(3),
              child: Center(
                child: Column(
                  children: [
                    TextButton(
                      onPressed: () {
                        RouteConfig().main.currentState!.pop();
                      },
                      child: Text('pop'),
                    ),
                    TextButton(
                      onPressed: () {
                        RouteConfig().main.currentState!.pushNamed(two);
                      },
                      child: Text('dcdf'),
                    ),
                  ],
                ),
              ),
            ),
          );
        });
        break;
      case two:
        page = const Text('Two');
        break;
      case three:
        page = const Text('Three');
        break;
      default:
        page = const Center(child: Text('Not Found'));
    }

    return MaterialPageRoute<dynamic>(
      builder: (context) {
        return page;
      },
      settings: settings,
    );
  }
}

我可以在嵌套导航器中向后滑动。 例如，在我点击弹出按钮后，它会弹出嵌套导航器的初始路由 Nestednavigator go 当它是应用程序的初始路由时如何防止这种行为。

例如参考视频

Answer 1

解决方法是

• 以编程方式我们可以返回它是当前在 flutter 中的一个错误
• 为了防止浏览器后退和硬件后退，添加一个返回 false 的 willpopscope 以防止后退或在 ios 中滑动返回