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

Posted 2023-02-23

【中文标题】Flutter Web-Proper 方式使用 onGenerateRoute 和 routes 作为 MaterialApp 的属性

【英文标题】：Flutter Web-Proper way to use both of onGenerateRoute and routes as properties of MaterialApp

【发布时间】：2021-04-15 16:04:24

【问题描述】：

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

【参考方案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=[e-mail]，那么settings.name就是/auth?email=[e-mail]

 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());
    
  

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

【讨论】：

这真的很棒，我已经尝试过你的答案，效果非常好，就像我想要的一样......非常感谢你的帮助