如何让Flutter GridView onTap将选定的项目数据发送到下一个屏幕？

Question

这是GridView（产品列表）

GridView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2.5,
mainAxisSpacing: 2.5,
mainAxisExtent: 310,
),
children: \_productsList.map(
(item) =\>

                      Padding(
                        padding: EdgeInsets.all(MediaQuery.of(context)
                            .getProportionateScreenWidth(5)),
                        child: GestureDetector(
                          onTap: () {
                            // Navigator.of(context).push(MaterialPageRoute(
                            //     builder: (context) => ProductDetails(
                            //       products: _productsList[index],
                            //     )));
                            // const ProductRoute(productsData: product.id)));
                          },
                          child: Container(
                            padding: EdgeInsets.all(
                              MediaQuery.of(context)
                                  .getProportionateScreenWidth(10),
                            ),
                            decoration: BoxDecoration(
                                color: Colors.grey.withOpacity(0.1),
                                borderRadius: BorderRadius.circular(15)),
                            child: Column(
                              children: [
                                AspectRatio(
                                  aspectRatio: 1,
                                  child: Container(
                                    padding: EdgeInsets.all(
                                      MediaQuery.of(context)
                                          .getProportionateScreenWidth(10),
                                    ),
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius:
                                        BorderRadius.circular(15)),
                                    child: item.sale != "0"
                                        ? badges.Badge(
                                      position:
                                      badges.BadgePosition.topEnd(
                                          top: -10, end: -10),
                                      showBadge: true,
                                      badgeContent: Center(
                                          child: Text(
                                            '-${item.sale}%',
                                            style: const TextStyle(
                                                color: Colors.white),
                                          )),
                                      ignorePointer: false,
                                      badgeStyle: badges.BadgeStyle(
                                        badgeColor: Colors.red,
                                        shape: badges.BadgeShape.square,
                                        borderRadius:
                                        BorderRadius.circular(15),
                                        padding: const EdgeInsets.all(5),
                                      ),
                                      child: FadeInImage(
                                        image: NetworkImage(
                                            "http://216.250.11.251/market_api/v1/static/product_images/${item.image}"),
                                        placeholder: const AssetImage(
                                            "assets/images/no.png"),
                                        imageErrorBuilder:
                                            (context, error, stackTrace) {
                                          return Image.asset(
                                              'assets/images/no.png',
                                              fit: BoxFit.fitWidth);
                                        },
                                        fit: BoxFit.fitWidth,
                                      ),
                                    )
                                        : FadeInImage(
                                      image: NetworkImage(
                                          "http://216.250.11.251/market_api/v1/static/product_images/${item.image}"),
                                      placeholder: const AssetImage(
                                          "assets/images/no.png"),
                                      imageErrorBuilder:
                                          (context, error, stackTrace) {
                                        return Image.asset(
                                            'assets/images/no.png',
                                            fit: BoxFit.fitWidth);
                                      },
                                      fit: BoxFit.fitWidth,
                                    ),
                                  ),
                                ),
                                const SizedBox(height: 7.5),
                                Text(
                                  "${item.name}",
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold),
                                  maxLines: 1,
                                ),
                                const SizedBox(height: 7.5),
                                Text(
                                  (item.desc == '' ? item.desc : item.code) as String,
                                  style: const TextStyle(
                                      color: Colors.grey, fontSize: 11),
                                  maxLines: 2,
                                ),
                                const SizedBox(height: 7.5),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(
                                      "TMT ${item.price}",
                                      style: TextStyle(
                                        color: Colors.red,
                                        fontSize: MediaQuery.of(context)
                                            .getProportionateScreenWidth(12.5),
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 7.5),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Container(
                                      padding: EdgeInsets.all(
                                          MediaQuery.of(context)
                                              .getProportionateScreenWidth(6)),
                                      decoration: BoxDecoration(
                                        color: Colors.transparent,
                                        borderRadius: BorderRadius.circular(15),
                                        border: Border.all(
                                            color: Colors.red.withOpacity(0.3)),
                                      ),
                                      child: Padding(
                                        padding: EdgeInsets.only(
                                            right: MediaQuery.of(context)
                                                .getProportionateScreenWidth(
                                                12.5),
                                            left: MediaQuery.of(context)
                                                .getProportionateScreenWidth(
                                                12.5)),
                                        child: const Icon(
                                          Icons.favorite_border_rounded,
                                          color: Colors.red,
                                          size: 20,
                                        ),
                                      ),
                                    ),
                                    SizedBox(
                                      width: MediaQuery.of(context)
                                          .getProportionateScreenWidth(5),
                                    ),
                                    Container(
                                      padding: EdgeInsets.all(
                                          MediaQuery.of(context)
                                              .getProportionateScreenWidth(6)),
                                      decoration: BoxDecoration(
                                        color: Colors.red,
                                        borderRadius: BorderRadius.circular(15),
                                        border: Border.all(color: Colors.red),
                                      ),
                                      child: Padding(
                                        padding: EdgeInsets.only(
                                            right: MediaQuery.of(context)
                                                .getProportionateScreenWidth(
                                                12.5),
                                            left: MediaQuery.of(context)
                                                .getProportionateScreenWidth(
                                                12.5)),
                                        child: const Icon(
                                          Icons.shopping_cart,
                                          color: Colors.white,
                                          size: 20,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
            ).toList(),
        ),

如何让Flutter GridView onTap将所选项目数据发送到下一个屏幕？至少你可以想出这样的东西

Answer 1

您可以使用 GridView Builder 来完成，这里有一个示例代码

Flexible(
                child: GridView.builder(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 10,
                  ),
                  physics: const ScrollPhysics(),
                  itemCount: _productsList.length,
                  gridDelegate:
                      const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: 10.0,
                          mainAxisSpacing: 10.0),
                  itemBuilder: (BuildContext context, int index) {
                    return GestureDetector(
                          onTap: () {
                            Navigator.of(context).push(MaterialPageRoute(
                                builder: (context) => ProductDetails(
                                  products: _productsList[index],
                                )));
                         
                          },
                          child: Container(child: Text("${_productsList[index]}"),));
                  },
                ),
              )

或与您的代码相同，只需传递“item”，而不是 _productsList[index]

Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => ProductDetails(
                                      products: item,
                                    )));