使用颤振将多个参数传递给命名路由

Posted 2023-02-23

【中文标题】使用颤振将多个参数传递给命名路由

【英文标题】：Passing multiple arguments to named routes with flutter

【发布时间】：2021-10-15 18:56:30

【问题描述】：

我正在尝试使用具有多个命名参数的命名路由，如下例所示，问题是如果我想将多个参数传递到屏幕，那么我需要使用这些参数定义一个自定义类。假设我有 10 个屏幕要导航，所以用它的参数定义 10 个自定义类是否有意义？

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      onGenerateRoute: (settings) 
        if (settings.name == FirstScreen.routeName) 
        
          final args = settings.arguments as FirstScreenArguments;

          return MaterialPageRoute(
            builder: (context) 
              return FirstScreen(
                title: args.title,
                message: args.message,
              );
            ,
          );
         else if (settings.name == HomeScreen.routeName)
          return MaterialPageRoute(
            builder: (context) 
              return HomeScreen();
            ,
          );
        assert(false, 'Need to implement $settings.name');
        return null;
      ,
      title: 'Navigation with named arguments',
      initialRoute: HomeScreen.routeName,
    );
  


class HomeScreen extends StatelessWidget 
  HomeScreen(Key? key) : super(key: key);

  static const routeName = '/';

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () 
            Navigator.pushNamed(
              context,
              FirstScreen.routeName,
              arguments: FirstScreenArguments(
                title: 'Welcome',
                message: "Coming from home screen ",
              ),
            );
          ,
          child: const Text('Navigate to first screen'),
        ),
      ),
    );
  


class FirstScreen extends StatelessWidget 
  final String title;
  final String message;

  const FirstScreen(Key? key, required this.title, required this.message)
      : super(key: key);

  static const routeName = '/firstScreen';

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(title),
            Text(message),
          ],
        ),
      ),
    );
  


class FirstScreenArguments 
  final String title;
  final String message;

  FirstScreenArguments(required this.title, required this.message);

【问题讨论】：

您可以将一组参数传递给命名路由

如何将命名参数作为数组元素传递？ @t00n

Navigator.pushNamed( context, FirstScreen.routeName, arguments: [FirstScreenArguments(title: 'Welcome', message: "Coming from home screen", ), someOtherData, someOtherData2,....], );只需在 settings.arguments 中使用 [] 您将收到和数组，因此，您可以通过索引访问其上的元素。

“问题是如果我想将多个参数传递给屏幕，那么我需要使用这些参数定义一个自定义类” - 传递一个Map那么

如果数组没有命名参数怎么办？只需按索引获取元素，如果您想通过类似于@pskink 建议的命名参数来访问它们

【参考方案1】：

标准方法是为每个页面定义相关类，但是您可以在每个页面上创建一个JSON 字符串并将其传递给另一个页面。例如，首先在第 1 页中定义它：

String temp = json.encode(
par1:"test",
par2:"test2" // and so on
);

然后将其传递到另一个页面：

Navigator.pushNamed(
              context,
              FirstScreen.routeName,
              arguments: temp
            );

然后在另一个页面上解码：

Map<String, dynamic> data = json.decode(temp);

【讨论】：

为什么不直接传递Map？