屏幕图像
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();
}
},
)
最佳答案
您可以使用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,
)
关于flutter - 如何在GridView中每6个不同的项目渲染一个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57902743/