Flutter 通过命名路由导航直接传递参数

Posted 2023-02-23

【中文标题】Flutter 通过命名路由导航直接传递参数

【英文标题】：Flutter pass argument directly with named routes navigation

【发布时间】：2019-10-12 08:39:32

【问题描述】：

我一直在查看此处的所有答案，以便在进行命名路线导航时传递参数，但它们似乎是旧答案或者它们不起作用。

根据所写的内容，它应该可以工作，但它似乎没有做任何事情，所以我不确定我的错误在哪里。

我是这样设置的：

Main.dart（使用我的命名路线设置）：

  void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primaryColor: Colors.white,
        ),
        initialRoute: HomePageScreen.id,
        routes: 
          HomePageScreen.id: (context) => HomePageScreen(),
          AddItemScreen.id: (context) => AddItemScreen(),
          AdvertiseScreen.id: (context) => AdvertiseScreen(),
          HomePageFilterScreen.id: (context) => HomePageFilterScreen(),
          HomePageResultsScreen.id: (context) => HomePageResultsScreen(),
          ItemPageProfileScreen.id: (context) => ItemPageProfileScreen(),
          ItemPageProfileSuggestUpdateScreen.id: (context) => ItemPageProfileSuggestUpdateScreen(),
          ItemPageWhereToBuyAddStoreToDatabaseScreen.id: (context) => ItemPageWhereToBuyAddStoreToDatabaseScreen(),
          ItemPageWhereToBuyMapScreen.id: (context) => ItemPageWhereToBuyMapScreen(),
          ItemPageWhereToBuyScreen.id: (context) => ItemPageWhereToBuyScreen(),
          MenuScreen.id: (context) => MenuScreen(),
          NotAvailableScreen.id: (context) => NotAvailableScreen(),
          TermsScreen.id: (context) => TermsScreen(),
          
   );
  

HomePageResultsScreen.dart（点击按钮时，我正在使用 push named 导航到下一页，这是有效的，因为新页面 'ItemPageProfileScreen 正在打开）：

onTap: () 
           Navigator.pushNamed(context, ItemPageProfileScreen.id, arguments: 'MyTestString');
          

ItemPageProfileScreen.dart（我曾尝试使用 MaterialApp onGenerateRoute 获取参数并打印到屏幕进行测试，但它不起作用）：

  class ItemPageProfileScreen extends StatefulWidget 

  static const String id = 'item_page_profile_screen';

  @override
  _ItemPageProfileScreenState createState() => _ItemPageProfileScreenState();


class _ItemPageProfileScreenState extends State<ItemPageProfileScreen> 
  @override
  Widget build(BuildContext context) 

    MaterialApp(
      onGenerateRoute: (routeSettings)
        final arguments = routeSettings.arguments;
        print(arguments.toString());
      ,
    );

    return Scaffold(),

感谢您的帮助。

编辑第二次尝试：

class ItemPageProfileScreen extends StatefulWidget 

  final String argument;

  ItemPageProfileScreen(this.argument);

  static const String id = 'item_page_profile_screen';

  @override
  _ItemPageProfileScreenState createState() => _ItemPageProfileScreenState();


class _ItemPageProfileScreenState extends State<ItemPageProfileScreen> 
  @override
  Widget build(BuildContext context) 

    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text(widget.argument),

【问题讨论】：

***.com/a/56280046/2252830

谢谢。我不明白这如何应用于我的代码，请您详细说明。

您必须为ItemPageProfileScreen 类添加一个或多个参数的构造函数（与我在Hello 类中使用的方法相同）

你能说得更具体些吗？我不明白您的代码如何获得问候，如何将参数“世界”分配给问候以及如何将其传递给有状态小部件而不是无状态小部件。谢谢

它是有状态的还是无状态的并不重要——它的工作原理是一样的——如果你不喜欢这种方法，请使用flutter.dev/docs/cookbook/navigation/…

【参考方案1】：

有一篇关于如何使用命名路由传递参数的官方文章。 https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

主要思想非常简单：将参数传递到屏幕小部件的构造函数。

在官方文档（在上面的链接中）中，他们实际上使用了命名路由和常规路由这两种方法，尽管文章中提到了命名路由。

无论如何。专注于构造函数和参数。

如果您在导航时仅传递路径名称，您可以在哪里访问具有命名路由的屏幕构造函数？在onGenerateRoute 方法中。让我们去做吧。

在您的顶部屏幕 MyApp 中覆盖 onGenerateRoute 方法（这是您的错误所在）。如果你这样做，你就不需要routes: （你的第二个错误）

class MyApp extends StatelessWidget 
   @override
   Widget build(BuildContext context) 
      return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
             primaryColor: Colors.white,
          ),
          initialRoute: HomePageScreen.id,
          onGenerateRoute: (settings) 
             if(settings.name == ItemPageProfileScreen.id) 
                String msg = settings.arguments;
                return MaterialPageRoute(builder: (_) => ItemPageProfileScreen(msg));
              else if(...
 ,

从小部件构造函数中获取参数：

class ItemPageProfileScreen extends StatefulWidget 
    final String argument;

    ItemPageProfileScreen(this.argument);

    static const String id = 'item_page_profile_screen';

    @override
    _ItemPageProfileScreenState createState() => _ItemPageProfileScreenState();


class _ItemPageProfileScreenState extends State<ItemPageProfileScreen> 
    @override
    Widget build(BuildContext context) 
       String msg = widget.argument;
       ...

并随时发送参数：

 onTap: () Navigator.pushNamed(context, ItemPageProfileScreen.id, arguments: 'MyTestString');

希望这会有所帮助。