Flutter中如何将JSON响应传递至另一个视图？

嘿，作为Flutter新手遇到路由传参问题太正常啦！我来帮你搞定把登录后的JSON响应传到主页的事儿～

下面给你两种简单易上手的方法，都是针对你的代码场景来的：

方法一：用Navigator.pushNamed结合路由参数 #

这种方法适配你现在已经定义好的routes映射，只需要做几处修改：

1. 给HomeView添加接收JSON的构造函数
   在你的home_view.dart文件里，修改HomeView类，让它能接收并存储JSON数据：

class HomeView extends StatelessWidget {
  final Map<String, dynamic> userData; // 用来存储传递的JSON数据

  // 构造函数，要求必须传入userData
  const HomeView({Key? key, required this.userData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 这里就可以直接使用this.userData啦，比如显示用户名：
    return Scaffold(
      body: Center(
        child: Text('欢迎回来，${userData['username']}'),
      ),
    );
  }
}

2. 修改main.dart里的路由定义
   原来的路由是直接创建HomeView实例，现在要改成从路由参数里获取数据再创建：

final routes = <String, WidgetBuilder>{
  Login.tag: (context) => const Login(),
  HomeView.tag: (context) {
    // 从路由设置中取出传递的参数，这里要确保类型是Map<String, dynamic>
    final userData = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
    return HomeView(userData: userData);
  },
};

3. 在Login页面导航时传递JSON数据
   当用户验证通过、你拿到API返回的JSON响应后，这样跳转：

// 假设你已经拿到了接口返回的jsonResponse
Map<String, dynamic> jsonResponse = await yourLoginApiCall();

// 带参数跳转到主页
Navigator.pushNamed(context, HomeView.tag, arguments: jsonResponse);

方法二：直接构造HomeView并跳转（更直观） #

如果你觉得修改路由映射有点麻烦，也可以直接用Navigator.push来跳转，这种方式新手更容易理解：

1. 同样先给HomeView添加接收JSON的构造函数
   和方法一的第一步完全一样，确保HomeView能接收userData参数。

2. 在Login页面直接跳转并传参
   验证通过后，直接创建HomeView实例并传递数据：

Map<String, dynamic> jsonResponse = await yourLoginApiCall();

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => HomeView(userData: jsonResponse),
    // 如果你还想保留tag的标识，可以加上这行
    settings: const RouteSettings(name: HomeView.tag),
  ),
);

这种方式下，main.dart里原来的路由定义可以不用修改，非常灵活。

小提示 #

为了避免空指针崩溃，你可以在获取参数的时候做个安全处理，比如：

final userData = ModalRoute.of(context)?.settings.arguments as? Map<String, dynamic> ?? {};

这样就算没传参数，HomeView也能拿到一个空的Map，不会直接崩溃。

这样就能轻松把登录后的JSON数据传到主页啦！如果还有其他细节问题随时问～

内容的提问来源于stack exchange，提问作者Muhammad Ikhlas