命名路由如何在 flutter web 中具有 URL 参数？

Question

我正在构建一个网络应用程序，它需要一个获取帖子 ID 的路由，然后它将使用该 ID 获取帖子。

我怎么能有 URL 参数让我们说/post/:idid 是参数

我的应用目前看起来像这样：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title: "Paste",
      initialRoute: "/",
      theme: ThemeData(
          primarySwatch: Colors.green,
          primaryColor: Colors.blue
      ),
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      },
      debugShowCheckedModeBanner: false
    );
  }
}

编辑：这是我根据@BloodLoss 尝试过的，出于某种原因，我在访问时没有得到任何东西到控制台 localhost:8080/post?id=123

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      },
      onGenerateRoute: (settings) {
        if (settings.name == "/post") {
          print(settings.arguments); // Doesn't fire :(

          return MaterialPageRoute(
            builder: (context) {
              // TODO
            }
          );
        }
      },
      debugShowCheckedModeBanner: false
    );
  }
}

Answer 1

太长了；博士

//in your example: settings.name = "/post?id=123"
final settingsUri = Uri.parse(settings.name);
//settingsUri.queryParameters is a map of all the query keys and values
final postID = settingsUri.queryParameters['id'];
print(postID); //will print "123"

深入分析

在完美的世界中，您可以queryParameters通过Uri.base.queryParameters以下方式访问：

尿素碱基

返回当前平台的自然基础 URI。在浏览器中运行时，这是当前页面的当前 URL（来自 window.location.href）。当不在浏览器中运行时，这是引用当前工作目录的文件 URI。

但目前 flutter 中存在一个问题，您的#/路径会扰乱Uri.baseUri 的解释。
按照问题 #33245进行操作，直到此问题得到解决，您将能够使用Uri.base.queryParameters

Answer 2

请点击此链接了解更多信息https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

在你的MaterialApp

  onGenerateRoute: (settings) {
    // If you push the PassArguments route
    if (settings.name == PassArgumentsScreen.routeName) {
      // Cast the arguments to the correct type: ScreenArguments.
      final ScreenArguments args = settings.arguments;

      // Then, extract the required data from the arguments and
      // pass the data to the correct screen.
      return MaterialPageRoute(
        builder: (context) {
          return PassArgumentsScreen(
            title: args.title,
            message: args.message,
          );
        },

或者你可以使用这个插件Fluro像网络一样本地化