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

Air-慧慧提问于 2026-03-17 05:31:17 阅读 50

移动

我在用Flutter做路由跳转时，想从首页传个用户ID到详情页，但不知道怎么在目标页面拿到这个参数。试过用Navigator.push传参，但接收的时候总是null，是不是哪里写错了？

这是我的跳转代码：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage(userId: '123')),
);

然后在DetailPage里我定义了构造函数，但运行时报错说缺少必要参数，是不是应该用别的传参方式？

我来解答赞 10 收藏

反馈

1 条解答

红敏 Lv1

你的写法其实是对的，问题出在 DetailPage 的构造函数定义上。

看一下你是不是漏了 required 关键字：

class DetailPage extends StatelessWidget {

  final String userId;



  DetailPage({required this.userId});  // 加上 required



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(child: Text('User ID: $userId')),

    );

  }

}

这样 Navigator.push 那段代码就能正常工作了。

如果你想用 Flutter 推荐的方式（路由传参），也可以这样：

// 跳转时

Navigator.pushNamed(

  context,

  '/detail',

  arguments: {'userId': '123'},

);



// DetailPage 里接收@override

Widget build(BuildContext context) {

  final args = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;

  final userId = args['userId'];

  

  return Scaffold(

    body: Center(child: Text('User ID: $userId')),

  );

}

两种方式都能用，第一种直接构造函数传参更简单直接，第二种适合复杂参数或需要统一管理路由的场景。

2026-03-18 13:02