Flutter如何实现页面间多参数传递？已有单参数传参方法

要实现多参数传递，有两种常用方式，推荐用自定义实体类（类型安全），也可以用Map快速实现，具体修改如下：

方法一：自定义实体类（推荐，类型安全） #

这种方式能在编译阶段检查参数类型，避免运行时错误。

1. 先定义一个用于承载参数的类，比如包含图片链接和标题两个参数：

class PictureArgs {
  final String imageUrl;
  final String title; // 示例第二个参数，可根据需求替换为其他类型/字段

  PictureArgs({required this.imageUrl, required this.title});
}

2. 修改Screen1的跳转代码，把arguments换成实体类的实例：

GestureDetector(
  onTap: () => Navigator.of(context).push(PageTransition(
    settings: RouteSettings(
      // 传递封装好的多参数实例
      arguments: PictureArgs(imageUrl: imageUrl, title: "示例图片标题"),
    ),
    type: PageTransitionType.fade,
    child: const ShowPictureScreen(),
  )),
)

3. 修改Screen2的参数接收代码，解析实体类并获取参数：

@override
Widget build(BuildContext context) {
  // 将参数转换为自定义实体类
  final args = ModalRoute.of(context)!.settings.arguments as PictureArgs;
  
  // 直接取出需要的参数
  final photoUrl = args.imageUrl;
  final photoTitle = args.title;

  // ...其他页面代码

  // 注意：原代码里的Text('photoUrl')是固定字符串，要改成变量photoUrl才能显示实际值
  Text(photoUrl),
  Text(photoTitle), // 新增展示第二个参数
}

方法二：使用Map传递（快速实现，无类型检查） #

如果只是临时快速实现，可直接用Map传递键值对，但没有类型校验，需注意取值时的类型匹配。

1. 修改Screen1的跳转代码，传递包含多参数的Map：

GestureDetector(
  onTap: () => Navigator.of(context).push(PageTransition(
    settings: RouteSettings(
      arguments: {
        "imageUrl": imageUrl,
        "title": "示例图片标题" // 第二个参数
      },
    ),
    type: PageTransitionType.fade,
    child: const ShowPictureScreen(),
  )),
)

2. 修改Screen2的参数接收代码，解析Map并取值：

@override
Widget build(BuildContext context) {
  final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
  
  // 从Map中取出参数，可加空值兜底避免报错
  final photoUrl = args["imageUrl"] ?? "empty";
  final photoTitle = args["title"] ?? "无标题";

  // ...其他页面代码

  Text(photoUrl),
  Text(photoTitle), // 新增展示第二个参数
}

内容的提问来源于stack exchange，提问作者It'sPhil