Flutter中如何正确传递参数给新页面并接收？

南宫艳雯提问于 2026-03-15 23:16:20 阅读 8

移动

我在用Flutter做路由跳转时，想从首页传个用户ID到详情页，但不知道怎么在目标页面拿到这个参数。官方文档说可以用RouteSettings，但我试了好像context里取不到。

我现在的跳转代码是这样的：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(),
    settings: RouteSettings(arguments: {'userId': 123}),
  ),
);

然后在DetailPage里用ModalRoute.of(context)?.settings.arguments去拿，结果有时候是null，特别是在热重载之后。是不是哪里用错了？有没有更稳妥的传参方式？

我来解答赞 1 收藏

反馈

1 条解答

设计师佳宁 Lv1

你用的 RouteSettings 方式本身没问题，但 ModalRoute.of(context)?.settings.arguments 拿不到是因为热重载后 widget tree 状态不稳定，context 可能还没完全挂载好。

其实 Flutter 官方现在更推荐构造函数传参，简单直接：

跳转时这样写：

Navigator.push(

  context,

  MaterialPageRoute(

    builder: (context) => DetailPage(userId: 123),

  ),

);

DetailPage 接收：

class DetailPage extends StatelessWidget {

  final int userId;

  

  const DetailPage({required this.userId});

  

  @override

  Widget build(BuildContext context) {

    // 直接用 userId 就行

    return Scaffold(

      body: Text('用户ID: $userId'),

    );

  }

}

这种方式参数和页面绑定在一起，不依赖运行时状态获取，热重载也不会丢。

如果你非要用 RouteSettings，记得在 build 方法里等 widget tree 挂载完成后再拿，而且要用 ? 空判断：

final args = ModalRoute.of(context)?.settings.arguments as Map?;

final userId = args?['userId'];

但说实话，构造函数传参代码更少、更稳、后期维护也清晰，能用构造函数解决的就别折腾 RouteSettings 了。

2026-03-16 20:24