转到新屏幕时如何更新 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.pushNamed，而不仅仅是 Navigator.push，它执行相同的操作，只是接受 String 路由作为参数。

用法示例：

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

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

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

How to update the browser bar path in a Flutter Web when going to a new screen

flutter-web