如何在GridView中每6个不同的项目渲染图像？

Question

屏幕图像

Api响应

{
                "id": 16,
                "name": "Nomlanga Stout",
                "description": "Voluptas Nostrum Exercitation N",
                "advertiser": "لا يوجد",
                "image": "http://alaa.rmal.sa/goblin/public/admin/assets/images/placeholder.jpg",
                "images": [
                    "http://alaa.rmal.sa/goblin/public/admin/assets/images/placeholder.jpg"
                ],
                "price": "740",
                "is_banner": false,
                "location": "Sequi Facilis Accusantium Volup",
                "since": "منذ ساعة 22",
                "is_fav": false
            },

            {
                "id": 3,
                "image": "http://alaa.rmal.sa/goblin/public/uploaded/banners/banner_qzNwwPnx1Vkw_2019-09-11.jpg",
                "name": "لا يوجد",
                "description": "لا يوجد",
                "advertiser": "لا يوجد",
                "images": [],
                "price": "لا يوجد",
                "location": "لا يوجد",
                "since": "لا يوجد",
                "is_banner": true,
                "is_fav": false
            }

我想创建一个产品的网格视图，每行有2个项目，每6个产品我要添加一个采用屏幕宽度的图像。

我试图通过创建一个返回2行的列表视图来自定义它 如果 *“ is_banner”为假 和图像，如果 “ is_banner”为真* 但这不起作用

ListView.builder(
                          primary: false,
                          shrinkWrap: true,
                          itemCount: _ads.length,
                          itemBuilder: (BuildContext context, int index) {
                            if (indexAd < _ads.length) {
                              print("Indexxxx" + indexAd.toString());
                              return _ads[indexAd].isBanner
                                  ? Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Container(
                                        width:
                                            MediaQuery.of(context).size.width,
                                        height: 100,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          image: DecorationImage(
                                            fit: BoxFit.cover,
                                            image: NetworkImage(
                                                _ads[indexAd++].image),
                                          ),
                                        ),
                                      ),
                                    )
                                  : Row(
                                      children: <Widget>[
                                        InkWell(
                                          onTap: () {
                                             print("--***********************---> ${indexDetail++}");
                                            // Navigator.of(context).push(
                                            //     PageRouteBuilder(
                                            //         pageBuilder: (_, __, ___) {

                                            //   return AdDetailPage(
                                            //     model: widget.model,
                                            //     adId: _ads[indexDetail].id,
                                            //   );
                                            // }));
                                          },
                                          child: ProductCard(
                                            name: _ads[indexAd].name,
                                            image: _ads[indexAd].image,
                                            address: _ads[indexAd].location,
                                            isFav: _ads[indexAd].isFav,
                                            date: _ads[indexAd].since,
                                            price: _ads[indexAd++].price,
                                          ),
                                        ),
                                        InkWell(
                                          onTap: () {
                                            print("--+++++++++++++++++++++++---> ${indexDetail++}");
                                            // Navigator.of(context).push(
                                            //     PageRouteBuilder(
                                            //         pageBuilder: (_, __, ___) {
                                            //   return AdDetailPage(
                                            //     model: widget.model,
                                            //     adId: _ads[indexDetail++].id,
                                            //   );
                                            // }));
                                          },
                                          child: ProductCard(
                                            name: _ads[indexAd].name,
                                            image: _ads[indexAd].image,
                                            address: _ads[indexAd].location,
                                            isFav: _ads[indexAd].isFav,
                                            date: _ads[indexAd].since,
                                            price: _ads[indexAd++].price,
                                          ),
                                        )
                                      ],
                                    );
                            } else {
                              return Container();
                            }
                          },
                        )

Answer 1

使用StaggeredGridView来获取可变尺寸的网格卡，并根据条件（index % 6 == 0）检查索引，如果可以，可以根据需要更改大小。

Answer 2

您可以使用Staggered Grid View

轻松实现这一目标

这是您所需的示例代码

while (dist.x < targetValue)
   MoveX();

dist.x = targetValue;