Flutter Web-将 onGenerateRoute 和路由都用作 MaterialApp 属性的正确方法

Question

我有一个浏览器 link 通过电子邮件发送重置密码 (http://trialxx.id/#/auth?email=trial@email.com )，所以每当用户单击 link 我想将他们导航到 ResetPasswordScreen。到目前为止我一直在onGenerateRoute里面声明路由，这里是代码

Route<dynamic> generateRoute(RouteSettings settings) {
    final settingsUri = Uri.parse(settings.name);
    final postID = settingsUri.queryParameters['email'];
    const start = "#/";
    const end = "?";
    final startIndex = settings.name.indexOf(start);
    final endIndex = settings.name.indexOf(end, startIndex + start.length);
    if (settings.name.substring(startIndex + start.length, endIndex) ==
            "auth" &&
        postID != null &&
        postID != "") {
      return MaterialPageRoute(
          builder: (context) => RisetPasswordScreen(email: settings.name),
          settings: RouteSettings(
              name: '/${settings.name.substring(startIndex + start.length)}'));
    }
    else {
      return MaterialPageRoute(builder: (context) => FirstScreen());
    }
  }

但是，我无法在routes属性中定义它，这是我定义路线的方式

MaterialApp(
debugShowCheckedModeBanner: false,
      onGenerateRoute: generateRoute,
      title: 'e-Recruitment',
      initialRoute: '/',
      routes: {
      if (Uri.base.queryParameters['email'] != null &&
            Uri.base.queryParameters['email'] != "")
          if (Uri.base.toString().substring(
                  Uri.base.toString().indexOf("#/") + 2,
                  Uri.base
                      .toString()
                      .indexOf("?", Uri.base.toString().indexOf("#/") + 2)) ==
              "auth")
            '/auth': (context) => RisetPasswordScreen()
          else
            '/home': (context) => FirstScreen(),
      '/': (context) => AnotherPage(),
      '/second': (context) => SecondPage(),
      })

我是不是做错了，或者有没有正确的方法来定义 /auth?email=trial@email.com 内部路由属性的路由？

Answer 1

你应该保持路线简单。您想为每个屏幕定义一个路由名称而不使用任何通配符（如您在示例中所尝试的那样）。

在你的 material 中只定义没有参数的路由：

Widget test(){
    return MaterialApp(
       debugShowCheckedModeBanner: false,
       onGenerateRoute: generateRoute,
       title: 'e-Recruitment',
       initialRoute: '/',
       routes: {
       '/auth': (context) => RisetPasswordScreen(),
       '/home': (context) => FirstScreen(),
       '/': (context) => AnotherPage(),
       '/second': (context) => SecondPage(),
    });
}

然后在您的 generateRoute() 函数中像您一样解析 uri，但不会使事情过于复杂 - RouteSettings[=28 中的参数 name =] 仅包含 /# 之后的路径。因此，如果您的 link 是 http://trialxx.id/#/auth?email=trial@email.com，那么 settings.name 将是 /auth?email=trial@email.com

Route<dynamic> generateRoute(RouteSettings settings) { var uri = Uri.parse(settings.name); switch (uri.path) { case home: return MaterialPageRoute(builder: (_) => MyHomePage()); break; case auth: return MaterialPageRoute( builder: (_) => ResetPasswordPage(email: uri.queryParameters["email"])); break; default: return MaterialPageRoute(builder: (_) => ErrorPage()); } }

将电子邮件作为变量传递给页面并在那里处理其逻辑

Flutter Web-将 onGenerateRoute 和路由都用作 MaterialApp 属性的正确方法

Flutter Web-Proper way to use both of onGenerateRoute and routes as properties of MaterialApp

navigation

routes

flutter

flutter-web