Flutter路由页面间如何传递数据？含命名路由传参场景

嘿，这个场景我太熟了！用Navigator.of(context).pushNamed()跳转时传递自定义数据对象其实非常简单，主要靠路由的arguments参数来实现，我给你一步步拆解，附完整代码示例：

步骤1：定义你的数据对象类 #

首先你得有一个要传递的自定义数据类，比如假设你要传递用户信息：

// 自定义数据类，用final字段保证不可变性（推荐）
class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

步骤2：配置路由以接收参数 #

接下来要在你的路由配置里处理参数传递，这里有两种常见方式：

方式一：直接在routes映射中处理 #

如果你的路由是直接写在MaterialApp的routes里，可以这样获取参数：

MaterialApp(
  initialRoute: '/page-1',
  routes: {
    '/page-1': (context) => const Page1(),
    '/page-2': (context) {
      // 从路由设置中取出传递的参数，注意做类型检查避免报错
      final User? user = ModalRoute.of(context)?.settings.arguments as User?;
      // 如果参数为空，可以做兜底处理
      if (user == null) {
        return const ErrorPage();
      }
      return Page2(user: user);
    },
  },
);

方式二：用onGenerateRoute做更灵活的路由处理 #

如果你的路由逻辑比较复杂（比如需要参数校验、动态路由），推荐用onGenerateRoute，它的扩展性更强：

MaterialApp(
  initialRoute: '/page-1',
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/page-1':
        return MaterialPageRoute(builder: (context) => const Page1());
      case '/page-2':
        // 先校验参数类型，避免类型转换异常
        if (settings.arguments is User) {
          final User user = settings.arguments as User;
          return MaterialPageRoute(builder: (context) => Page2(user: user));
        }
        // 参数不合法时跳转到错误页面
        return MaterialPageRoute(builder: (context) => const ErrorPage());
      default:
        // 路由不存在时的处理
        return MaterialPageRoute(builder: (context) => const NotFoundPage());
    }
  },
);

步骤3：在Page1中跳转并传递数据 #

现在回到Page1，修改你的pushNamed调用，加上arguments参数把数据传进去：

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    // 模拟要传递的用户数据
    final User currentUser = User('张三', 25);

    return Scaffold(
      appBar: AppBar(title: const Text('Page1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转时通过arguments传递数据对象
            Navigator.of(context).pushNamed(
              '/page-2',
              arguments: currentUser,
            );
          },
          child: const Text('跳转到Page2'),
        ),
      ),
    );
  }
}

步骤4：在Page2中接收并使用数据 #

最后在Page2里接收数据，推荐通过构造函数接收（类型更安全，代码可读性更高）：

class Page2 extends StatelessWidget {
  final User user;

  // 通过构造函数接收传递过来的用户对象
  const Page2({super.key, required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page2')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('用户名：${user.name}'),
            Text('年龄：${user.age}'),
          ],
        ),
      ),
    );
  }
}

额外小提示 #

• 类型安全很重要：尽量避免直接用as强制转换，最好先判断类型或者用as?做安全转换，防止空指针或类型异常。
• 返回数据到Page1：如果需要从Page2返回数据给Page1，可以用await Navigator.pushNamed()，然后在Page2中调用Navigator.pop(context, 返回的数据)来实现。
• 复杂对象传递：如果传递的是非常复杂的对象，确保它是可序列化的（比如用json_serializable），不过一般自定义对象直接传递就没问题。

内容的提问来源于stack exchange，提问作者Daniel Mana