flutter - 如何在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
            }

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

我试图通过创建一个返回2行的列表 View 来自定义它
如果 *“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

您可以使用Staggered Grid View轻松实现

这是您所需的示例代码

new StaggeredGridView.countBuilder(
    crossAxisCount: 2,
    itemCount: 10,
    itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      ),
    ),
    staggeredTileBuilder: (int index) => (index % 7 == 0)
        ? new StaggeredTile.count(2, 1)
        : new StaggeredTile.count(1, 1),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
  )