Navigator 组件支持通过使用通用标识符从应用程序的任何地方导航到特定路由。在某些情况下，你可能还希望能够传递参数给特定路由。例如，你希望导航到 /user 路由并携带上用户信息。

在 Flutter 中，你能通过提供额外的 arguments 给 Navigator.pushNamed 方法方便地完成这个任务。通过使用 ModalRoute.of 方法或 MaterialApp 和 CupertinoApp 构造器中的 onGenerateRoute 来获取参数。

这个章节讲解的是如何给特定路由传递参数并使用 ModelRoute.of 和 onGenerateRoute 来读取参数。

步骤

  • 定义需要传递的参数

  • 创建组件来获取参数

  • 把组件注册到路由表中

  • 导航到组件

1. 定义需要传递的参数

首先，定义需要传递给新路由的参数。在这个示例中，传递了两个数据： 页面的标题 title 和内容 message。

创建包含 title 和 message 字段的实体类来同时传递这两个数据。

  1. // You can pass any object to the arguments parameter. In this example, create a
  2. // class that contains both a customizable title and message.
  3. class ScreenArguments {
  4.   final String title;
  5.   final String message;
  7.   ScreenArguments(this.title, this.message);
  8. }

2. 创建组件来获取参数

接着，创建组件，从 ScreenArguments 提取 title 和 message 参数并展示。为了访问 ScreenArguments，可以使用 ModalRoute.of 方法。这个方法返回的是当前路由及其携带的参数。

  1. // A Widget that extracts the necessary arguments from the ModalRoute.
  2. class ExtractArgumentsScreen extends StatelessWidget {
  3.   static const routeName = '/extractArguments';
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     // Extract the arguments from the current ModalRoute settings and cast
  8.     // them as ScreenArguments.
  9.     final ScreenArguments args = ModalRoute.of(context).settings.arguments;
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text(args.title),
  14.       ),
  15.       body: Center(
  16.         child: Text(args.message),
  17.       ),
  18.     );
  19.   }
  20. }

3. 把组件注册到路由表中

然后，在 MaterialApp 的路由表 routes 中增加一个入口。路由表 routes 会根据路由的名称来决定需要创建哪个路由。

  1. MaterialApp(
  2.   routes: {
  3.     ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
  4.   },     
  5. );

4. 导航到组件

最后，在用户点击按钮后导航到 ExtractArgumentsScreen。在 Navigator.pushNamed 方法的 arguments 属性里提供需要传递的参数。随后，ExtractArgumentsScreen 就可以从参数中提取 title 和 message。

  1. // A button that navigates to a named route that. The named route
  2. // extracts the arguments by itself.
  3. RaisedButton(
  4.   child: Text("Navigate to screen that extracts arguments"),
  5.   onPressed: () {
  6.     // When the user taps the button, navigate to the specific rout
  7.     // and provide the arguments as part of the RouteSettings.
  8.     Navigator.pushNamed(
  9.       context,
  10.       ExtractArgumentsScreen.routeName,
  11.       arguments: ScreenArguments(
  12.         'Extract Arguments Screen',
  13.         'This message is extracted in the build method.',
  14.       ),
  15.     );
  16.   },
  17. );

此外，还可以使用 onGenerateRoute 提取参数

除了直接从组件里提取参数，你也可以通过 onGenerateRoute 函数提取参数，然后把参数传递给组件。

onGenerateRoute 函数会基于给定的 RouteSettings 来创建正确的路由。

  1. MaterialApp(
  2.   // Provide a function to handle named routes. Use this function to
  3.   // identify the named route being pushed and create the correct
  4.   // Screen.
  5.   onGenerateRoute: (settings) {
  6.     // If you push the PassArguments route
  7.     if (settings.name == PassArgumentsScreen.routeName) {
  8.       // Cast the arguments to the correct type: ScreenArguments.
  9.       final ScreenArguments args = settings.arguments;
  11.       // Then, extract the required data from the arguments and
  12.       // pass the data to the correct screen.
  13.       return MaterialPageRoute(
  14.         builder: (context) {
  15.           return PassArgumentsScreen(
  16.             title: args.title,
  17.             message: args.message,
  18.           );
  19.         },
  20.       );
  21.     }
  22.   },
  23. );

完整示例

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       // Provide a function to handle named routes. Use this function to
  10.       // identify the named route being pushed and create the correct
  11.       // Screen.
  12.       onGenerateRoute: (settings) {
  13.         // If you push the PassArguments route
  14.         if (settings.name == PassArgumentsScreen.routeName) {
  15.           // Cast the arguments to the correct type: ScreenArguments.
  16.           final ScreenArguments args = settings.arguments;
  18.           // Then, extract the required data from the arguments and
  19.           // pass the data to the correct screen.
  20.           return MaterialPageRoute(
  21.             builder: (context) {
  22.               return PassArgumentsScreen(
  23.                 title: args.title,
  24.                 message: args.message,
  25.               );
  26.             },
  27.           );
  28.         }
  29.       },
  30.       title: 'Navigation with Arguments',
  31.       home: HomeScreen(),
  32.     );
  33.   }
  34. }
  36. class HomeScreen extends StatelessWidget {
  37.   @override
  38.   Widget build(BuildContext context) {
  39.     return Scaffold(
  40.       appBar: AppBar(
  41.         title: Text('Home Screen'),
  42.       ),
  43.       body: Center(
  44.         child: Column(
  45.           mainAxisAlignment: MainAxisAlignment.center,
  46.           children: <Widget>[
  47.             // A button that navigates to a named route that. The named route
  48.             // extracts the arguments by itself.
  49.             RaisedButton(
  50.               child: Text("Navigate to screen that extracts arguments"),
  51.               onPressed: () {
  52.                 // When the user taps the button, navigate to the specific route
  53.                 // and provide the arguments as part of the RouteSettings.
  54.                 Navigator.push(
  55.                   context,
  56.                   MaterialPageRoute(
  57.                     builder: (context) => ExtractArgumentsScreen(),
  58.                     // Pass the arguments as part of the RouteSettings. The
  59.                     // ExtractArgumentScreen reads the arguments from these
  60.                     // settings.
  61.                     settings: RouteSettings(
  62.                       arguments: ScreenArguments(
  63.                         'Extract Arguments Screen',
  64.                         'This message is extracted in the build method.',
  65.                       ),
  66.                     ),
  67.                   ),
  68.                 );
  69.               },
  70.             ),
  71.             // A button that navigates to a named route. For this route, extract
  72.             // the arguments in the onGenerateRoute function and pass them
  73.             // to the screen.
  74.             RaisedButton(
  75.               child: Text("Navigate to a named that accepts arguments"),
  76.               onPressed: () {
  77.                 // When the user taps the button, navigate to a named route
  78.                 // and provide the arguments as an optional parameter.
  79.                 Navigator.pushNamed(
  80.                   context,
  81.                   PassArgumentsScreen.routeName,
  82.                   arguments: ScreenArguments(
  83.                     'Accept Arguments Screen',
  84.                     'This message is extracted in the onGenerateRoute function.',
  85.                   ),
  86.                 );
  87.               },
  88.             ),
  89.           ],
  90.         ),
  91.       ),
  92.     );
  93.   }
  94. }
  96. // A Widget that extracts the necessary arguments from the ModalRoute.
  97. class ExtractArgumentsScreen extends StatelessWidget {
  98.   static const routeName = '/extractArguments';
  100.   @override
  101.   Widget build(BuildContext context) {
  102.     // Extract the arguments from the current ModalRoute settings and cast
  103.     // them as ScreenArguments.
  104.     final ScreenArguments args = ModalRoute.of(context).settings.arguments;
  106.     return Scaffold(
  107.       appBar: AppBar(
  108.         title: Text(args.title),
  109.       ),
  110.       body: Center(
  111.         child: Text(args.message),
  112.       ),
  113.     );
  114.   }
  115. }
  117. // A Widget that accepts the necessary arguments via the constructor.
  118. class PassArgumentsScreen extends StatelessWidget {
  119.   static const routeName = '/passArguments';
  121.   final String title;
  122.   final String message;
  124.   // This Widget accepts the arguments as constructor parameters. It does not
  125.   // extract the arguments from the ModalRoute.
  126.   //
  127.   // The arguments are extracted by the onGenerateRoute function provided to the
  128.   // MaterialApp widget.
  129.   const PassArgumentsScreen({
  130.     Key key,
  131.     @required this.title,
  132.     @required this.message,
  133.   }) : super(key: key);
  135.   @override
  136.   Widget build(BuildContext context) {
  137.     return Scaffold(
  138.       appBar: AppBar(
  139.         title: Text(title),
  140.       ),
  141.       body: Center(
  142.         child: Text(message),
  143.       ),
  144.     );
  145.   }
  146. }
  148. // You can pass any object to the arguments parameter. In this example, create a
  149. // class that contains both a customizable title and message.
  150. class ScreenArguments {
  151.   final String title;
  152.   final String message;
  154.   ScreenArguments(this.title, this.message);
  155. }

Demonstrates navigating to different routes with arguments