如何实现Flutter GridView点击后将选中项数据传至下一页

你的代码里已经配置了GestureDetector的onTap回调，只需修正跳转逻辑，直接传递当前遍历的商品对象即可，具体实现方案如下：

步骤1：修正GridView的点击跳转逻辑 #

原代码通过_productsList.map((item) => ...)遍历列表，这里的item就是当前的商品实例，无需通过index从数组中取值，直接将item传入下一页即可。修改onTap代码：

GestureDetector(
  onTap: () {
    // 直接传递当前商品对象到ProductDetails页面
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => ProductDetails(products: item),
    ));
  },
  // 其余UI代码保持不变...
)

步骤2：确保目标页面能接收商品数据 #

ProductDetails页面需要定义对应的构造函数，用来接收商品对象参数。假设你的商品数据类为Product，示例代码如下：

class ProductDetails extends StatelessWidget {
  final Product products; // 类型需与你的商品类保持一致

  // 构造函数，接收商品参数
  const ProductDetails({super.key, required this.products});

  @override
  Widget build(BuildContext context) {
    // 在页面中直接使用products的属性，比如名称、价格等
    return Scaffold(
      appBar: AppBar(title: Text(products.name)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("商品名称：${products.name}", style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Text("商品价格：TMT ${products.price}", style: const TextStyle(color: Colors.red, fontSize: 16)),
            const SizedBox(height: 8),
            Text("商品描述：${products.desc.isEmpty ? products.code : products.desc}"),
            // 其他商品信息展示逻辑...
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 如果需要使用索引（index），可以将遍历方式改为_productsList.asMap().entries.map((entry) {var index = entry.key; var item = entry.value; ...})，但直接使用map的item更简洁。
• 自定义商品类无需额外序列化，Flutter支持直接传递对象，只要类中没有无法序列化的特殊成员即可。
• 若使用命名路由，可通过arguments传递数据：

  // 跳转时
  Navigator.pushNamed(context, '/productDetails', arguments: item);
  
  // 在ProductDetails页面接收数据
  final Product product = ModalRoute.of(context)!.settings.arguments as Product;
  

内容的提问来源于stack exchange，提问作者Atamyrat Şükürow