在初始路由颤振上获取查询参数

Question

我正在开发一个主要用于 web 的 flutter 应用程序，但我无法 add/get 查询来自 URL 的参数，查询参数将包含一个 id，这个 id 应该在应用程序内部使用

这是我在应用程序状态下的路线设置：

  return MaterialApp(navigatorKey: key,  initialRoute: '/main',
        routes: {
          // When navigating to the "/" route, build the FirstScreen widget.
          '/main': (context) => Map_View(),
          // When navigating to the "/second" route, build the SecondScreen widget.
          '/second': (context) => TaskClosed(),
        },onGenerateRoute: RouteGenerator.generateRoute,);
  }


  class RouteGenerator{
    
      static Route<dynamic> generateRoute(RouteSettings settings){
        final args = settings.arguments;
        print(args);
        var routingData = settings.name;
      }}

settings.arguments 始终为空

所以我应该将什么传递给 initialRoute 以使其在第一个屏幕上接受参数例如，调用 URL 应该是这样的：

https:示例。com/main?123

那么如何从URL

中得到这个参数

Answer 1

对不起，我误解了这个场景。这是我的建议

移除routes

  return MaterialApp(navigatorKey: key,  initialRoute: '/main',
        //routes: {
          // When navigating to the "/" route, build the FirstScreen widget.
          //'/main': (context) => Map_View(),
          // When navigating to the "/second" route, build the SecondScreen widget.
          //'/second': (context) => TaskClosed(),
          // },
       onGenerateRoute: RouteGenerator.generateRoute,);
  }

并改变

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;
    print(args);
    var routingData = settings.name;
    switch (routingData) {
      case "/main":
        return MaterialPageRoute(
          builder: (context) {
            return Map_View();
          },
          settings: settings,
        );
        break;
      case "/second":
        return MaterialPageRoute(
          builder: (context) {
            return TaskClosed();
          },
          settings: settings,
        );
        break;
      default:
        return MaterialPageRoute(
          builder: (context) {
            return YouUnKnowPage();
          },
          settings: settings,
        );
    }
  }
}

当你打电话给 Navigator.of(context).pushNamed("/main",arguments:"123"); 它将移动到 TaskClosed 并在控制台中打印 123

此外，如果您直接键入 link，例如 https:example.com/main?123 它将导致 YouUnKnowPage 而不是 Map_View，参数将是 null。尝试使用 Navigator.of(context).pushNamed("/main",arguments:"123");

如果你坚持直接打link，你可以试试这个

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
      String routingData;
      var arguments;
      if (settings.name != null) {
          routingData = settings.name;
      }
      final args = settings.arguments;

      if (args != null) {
          arguments = args;
      } else {
          Uri settingsUri = Uri.parse(settings.name);
          if (settingsUri.hasQuery) {
            arguments = "${settingsUri.queryParameters}";
          }
          if (settingsUri.pathSegments.length > 1) {
          routingData =
             "/" + settingsUri.pathSegments[settingsUri.pathSegments.length - 1];
          }
      }
    if (arguments != null) {
      print(arguments);
    }
     switch (routingData) {
      case "/main":
        return MaterialPageRoute(
          builder: (context) {
            return Map_View();
          },
          settings: settings,
        );
        break;
      case "/second":
        return MaterialPageRoute(
          builder: (context) {
            return TaskClosed();
          },
          settings: settings,
        );
        break;
      default:
        return MaterialPageRoute(
          builder: (context) {
            return YouUnKnowPage();
          },
          settings: settings,
        );
    }
  }
}

现在它将移动到 TaskClosed 并在控制台中打印 {123:}

Answer 2

我试过这段代码：

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    String? route;
    Map? queryParameters;
    if (settings.name != null) {
      var uriData = Uri.parse(settings.name!);
      route = uriData.path;
      queryParameters = uriData.queryParameters;
    }
    var message =
        'generateRoute: Route $route, QueryParameters $queryParameters';
    print(message);
    return MaterialPageRoute(
      builder: (context) {
        return MyHomePage(title: message);
      },
      settings: settings,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/main',
      routes: {
        // '/': (context) {
        //   print('route: /');
        //   return MyHomePage(title: 'Home');
        // },
        '/main': (context) {
          print('route: /main');
          return MyHomePage(title: 'route: Main');
        },
        '/second': (context) {
          print('route: /second');
          return MyHomePage(title: 'route: Second');
        },
      },
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

当我运行带有 URL http://localhost:55260/#/main?123 的应用程序时，我得到以下输出：

generateRoute: Route /, QueryParameters {}
generateRoute: Route /main, QueryParameters {123: }

屏幕显示 /main，URL 正确显示。

在初始路由颤振上获取查询参数

getting query parameter on initial route flutter

routes

query-parameters

web

dart

flutter