有什么方法可以将查询参数插入 flutter web 中的命名路由？

Question

我想将查询参数插入命名路由。

我的 MaterialApp

上有这个代码

Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Web',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      
        
    // Start the app with the "/" named route. In this case, the app starts
    // on the FirstScreen widget.
    initialRoute: '/login',
    routes: {
     
      '/login': (context) => LoginPage(),
      '/mainmenu': (context) => MainMenu(),
    
    },
    
  );
  }

现在我想将查询参数（例如 id）插入“/mainmenu”，这样当我想导航到主菜单页面时，URL 变成例如：http://localhost:57430/#/mainmenu/?id=1234。有什么办法吗？谢谢

Answer 1

你可以在 Flutter 中通过 Navigator 传递数据，

Navigator.pushReplacementNamed(context, '/home', arguments: {
        'id': 1234 
      });

在上面的代码中，您将使用参数将数据作为地图传递到下一个屏幕。

您可以通过以下步骤解码地图：

在下一个屏幕中声明一个 Map 变量

Map data = {}

并通过

data = ModalRoute.of(context).settings.arguments;
print(data);

此致，肉山

Answer 2

Flutter有专门针对这种情况的cookbook。 Linkhere

Answer 3

建议创建一个class来指定需要传递给路由的参数，例如：

class MainMenuArguments {
  final int id;
  MainMenuArguments(this.id);
}

那可以传给一个Navigator:

Navigator.pushNamed(context, MainMenuScreen.routeName, arguments: MainMenuArguments(1234)); // id = 1234

然后可以从 MainMenu Widget:

class MainMenuScreen extends StatelessWidget {
  static const routeName = '/mainMenu';

  @override
  Widget build(BuildContext context) {
    final MainMenuArguments args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      body: Center(
        child: Text(args.id.toString()), // displays 1234
      ),
    );
  }
}

为此，您需要在 MaterialApp 构造函数中注册路由：

MaterialApp(
  routes: {
    MainMenuArgumentsScreen.routeName: (context) => MainMenuArgumentsScreen(),
  },
);

有什么方法可以将查询参数插入 flutter web 中的命名路由？

Is there any way to insert a query parameters to a named route in flutter web?

flutter

web

routes

query-parameters