时间戳

首页 > 解决方案 > 命名路由如何在flutter web中具有URL参数？

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

问题描述

我正在构建一个网络应用程序，它需要一个获取帖子 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
    );
  }
}

标签： flutterdartflutter-web

解决方案

tl;博士

//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.base

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

但是目前#/在你的路径中存在一个问题，它会混淆Uri.baseUri 的解释。
请关注问题 #33245，直到此问题得到解决，您将能够使用Uri.base.queryParameters

推荐阅读