flutter-web - 转到新屏幕时如何更新 Flutter Web 中的浏览器栏路径

Question

我部署了一个 flutter web 应用程序，但是当用户浏览到不同的屏幕时，浏览器栏中的路径永远不会更新。

可以在这里体验:https://owleyes.codemagic.app/#/

我正在使用以下方法导航:

                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => AboutPage()),
                    );

https://github.com/owleyesdev/owleyes/blob/master/lib/pages/home_page.dart#L24

Answer 1

要完成此操作，您需要使用命名路由。使用命名路由会为 flutter 提供一个特定的字符串，以便在您导航到新路由时显示。使用命名路由的方法有据可查here ，但我将包括需要完成的基础知识。

您已经有一个 MaterialApp在你的小部件树的顶部。您只需要在此处使用 routes 定义您需要的路线即可。命名参数，接受类型 Map<String, WidgetBuilder>与 String关键是 String在 /#/ 之后附加到 URL .

return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    brightness: Brightness.dark,
    primaryColorDark: Colors.black,
    fontFamily: "GoogleSansRegular",
  ),
  routes: {
    '/': (context) => HomePage(),
    '/aboutPage': (context) => AboutPage(),
  }
);

我建议只定义 String键作为每个小部件的静态变量。这样就可以像 HomePage.route 一样访问它们, 这有助于接下来的必要修改。

现在不只是 Navigator.push , 你应该使用 Navigator.pushNamed , 它做同样的 Action ，只是接受一个 String路由作为参数。

使用示例:

Navigator.pushNamed(context, '/aboutPage');

使用它最终会得到一个 URL https://owleyes.codemagic.app/#/aboutPage .