Flutter中如何跨页面传递数据并在第二页展示匹配id的对应内容

1. 第一页跳转时携带参数 #

修改你现有代码中TextButton的onPressed逻辑，调用Navigator.pushNamed时通过arguments参数传入id数据，修改后的代码如下：

onPressed: () {
  // 先取出当前条目的id，建议做非空处理
  final String itemId = snapShot.data["table"][index]["id"].toString();
  Navigator.pushNamed(
    context,
    '/second',
    arguments: itemId,
  );
},

2. 第二页接收参数并使用 #

有两种常用的接收方式，根据你的路由注册方式选择即可：

方式一：直接在第二页通过ModalRoute获取（无需修改路由注册逻辑） #

在第二页的build方法中获取传递过来的参数：

@override
Widget build(BuildContext context) {
  // 获取路由参数，建议做空安全判断
  final String? itemId = ModalRoute.of(context)?.settings.arguments as String?;
  
  // 拿到itemId后就可以查询对应条目、渲染页面了
  return Scaffold(
    appBar: AppBar(title: Text("条目详情：$itemId")),
    // 剩余你的页面逻辑
  );
}

方式二：通过onGenerateRoute注册路由时传递（更符合类型安全要求） #

首先在你的MaterialApp配置中补充onGenerateRoute逻辑：

MaterialApp(
  // 你原有的其他配置，比如title、theme等
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/second') {
      // 接收参数并传递给第二页的构造函数
      final String itemId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => SecondPage(itemId: itemId),
      );
    }
    // 其他路由的处理逻辑
    return null;
  },
)

然后给第二页定义构造函数接收参数：

class SecondPage extends StatelessWidget {
  // 直接通过构造函数拿到id
  final String itemId;
  const SecondPage({super.key, required this.itemId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("条目详情：$itemId")),
      // 用itemId加载对应数据渲染即可
    );
  }
}

注意事项 #

• 建议对所有传递的参数做非空和类型校验，避免空指针或者类型转换异常
• 原代码中使用snapShot.data前建议先判断snapShot.hasData == true，符合Flutter空安全规范

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