我有以下代码段,
GridTile(
child: Card(
elevation: 5,
child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
),
),
);
产生以下输出。.
但是当我像这样在我的卡中添加列...
GridTile(
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Image.network(imageUrl, fit: BoxFit.scaleDown,),
],
),
),
);
我在这里缺少什么。,我需要照顾有关Column的重要布局细节吗?我需要专栏,以便可以在图像下方添加“收藏夹”按钮和产品说明。在父窗口小部件下面查找以供参考。
return Scaffold(
appBar: AppBar(
title: Text('Shopify'),
),
body: GridView.builder(
itemBuilder: (context, index) => ProductItem(dummyProducts[index].title, dummyProducts[index].imageUrl),
itemCount: dummyProducts.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10
),
),
);
您的图像具有确定的比例(宽/高比)。
使用gridDelegate
和childAspectRatio
,可以在GridTile
中分配GridView
的比例。
调整childAspectRatio
或调整图像比例。
玩这个数字可以看到效果:
childAspectRatio: 1 // square
childAspectRatio: 2 // horizontal rectangle
childAspectRatio: 0.5 // vertical rectangle
最终将图像包含在AspectRatio中。请在下面找到代码。
GridTile(
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 1,
child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
),
],
),
),
);