如何将Flutter页面列表项的指定参数传递至另一页面？

针对你在列表项中需要传递image、title、subname、price、discount到另一页面的需求，下面是两种最实用的实现方式：

一、构造函数直接传参（推荐，简单直观） #

这是Flutter中最常用的页面传参方式，步骤如下：

1. 给目标页面定义接收参数的构造函数 #

假设你的目标页面叫ProductDetailPage，先在该页面类中声明需要接收的参数，并通过构造函数初始化：

class ProductDetailPage extends StatelessWidget {
  final String image;
  final String title;
  final String subname;
  final String price;
  final String discount;

  // 构造函数，接收传入的参数
  const ProductDetailPage({
    super.key,
    required this.image,
    required this.title,
    required this.subname,
    required this.price,
    required this.discount,
  });

  @override
  Widget build(BuildContext context) {
    // 在这里直接使用上述参数渲染页面即可
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Column(
        children: [
          Image.network(image),
          Text(title),
          Text(subname),
          Text('价格：$price'),
          Text('折扣：$discount'),
        ],
      ),
    );
  }
}

2. 在列表项中添加点击导航逻辑 #

给你的MyImage组件包裹一个GestureDetector（如果MyImage本身没有onTap回调的话），点击时导航到目标页面并传入参数：

itemBuilder: (context, index) {
  // 先把当前项的参数存起来，代码更清晰
  final item = snapshot.data![index];
  final imageUrl = API.image + '/' + item['MainPicture'].toString();
  final title = item['productName'];
  final subname = item['productSubname'];
  final price = item['price'].toString(); // 注意这里的键要和接口返回一致，你原代码里的price应为字符串键，比如'price'
  final discount = '% ' + item['productDiscount'].toString();

  return GestureDetector(
    onTap: () {
      // 导航到目标页面并传入参数
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ProductDetailPage(
            image: imageUrl,
            title: title,
            subname: subname,
            price: price,
            discount: discount,
          ),
        ),
      );
    },
    child: MyImage(
      image: imageUrl,
      title: title,
      subname: subname,
      price: price,
      discount: discount,
    ),
  );
},

二、命名路由传参（适合大型项目统一管理路由） #

如果你的项目使用命名路由管理页面跳转，可以用这种方式：

1. 配置命名路由 #

在MaterialApp的routes中注册目标页面：

MaterialApp(
  routes: {
    '/productDetail': (context) => const ProductDetailPage(),
    // 其他路由...
  },
);

2. 导航时传入参数 #

在列表项的点击事件中，通过arguments传递参数：

onTap: () {
  Navigator.pushNamed(
    context,
    '/productDetail',
    arguments: {
      'image': imageUrl,
      'title': title,
      'subname': subname,
      'price': price,
      'discount': discount,
    },
  );
},

3. 目标页面获取参数 #

在ProductDetailPage的build方法中获取传递的参数：

@override
Widget build(BuildContext context) {
  // 获取路由参数
  final args = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
  
  return Scaffold(
    appBar: AppBar(title: Text(args['title'])),
    body: Column(
      children: [
        Image.network(args['image']),
        Text(args['title']),
        Text(args['subname']),
        Text('价格：${args['price']}'),
        Text('折扣：${args['discount']}'),
      ],
    ),
  );
}

注意事项 #

• 确保接口返回的键名和你代码中使用的一致（比如原代码里的snapshot.data[index][price]应为snapshot.data[index]['price']，price是字符串键）
• 如果snapshot.data可能为空，记得添加空安全判断（比如用!或者?，根据你的Flutter版本）

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