Flutter Web-Proper 方式使用 onGenerateRoute 和 routes 作为 MaterialApp 的属性

Question

我有一个通过电子邮件(http://trialxx.id/#/auth?email=trial@email.com ) 发送的重置密码的浏览器链接，因此每当用户单击该链接时，我都希望将它们导航到 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(),
      })

我做错了还是有正确的方法在 routes 属性中定义 /auth?email=trial@email.com 的路由？

Answer 1

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

在您的材料中仅定义不带参数的路线：

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 中的参数 name 仅包含 / 之后的路径#。所以如果你的链接是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());
    }
  }

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