我想在卡片小部件中显示网络图像。我希望图像具有卡的宽度和一些固定的高度。下面是代码。
ListView.builder(
itemCount: events.length,
padding: const EdgeInsets.all(8.0),
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
FadeInImage.assetNetwork(
placeholder: placeholder,
image: events[index].image,
fit: BoxFit.fitWidth,
height: 300,
)
],
),
);
})
当我给图像一个固定的高度时,它表现得很奇怪。图像在卡内居中,顶部和底部有一些填充物。我希望图像与顶部对齐。
我认为我们需要给图像一个宽度和高度,然后才能使盒子适合工作。框适合属性将适合框,但为此我们必须定义框。下面的代码对我有用。我尝试过不同大小的图像,它总是占用卡片的最大宽度和指定的高度。
上述解决方案可能不适用于所有类型的图像。
Card(
elevation: 4.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
clipBehavior: Clip.antiAlias,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
FadeInImage.assetNetwork(
alignment: Alignment.topCenter,
placeholder: 'images/placeholder.png',
image: events[index].image,
fit: BoxFit.fill,
width: double.maxFinite,
height: 200,
),
],
),
)
以上答案是我通过反复试验的理解。如果我对自己的理解不对,请纠正我
试试这段代码。从itemBuilder
调用此方法,它将为每个项目返回一张卡片。在使用Image.network()
时,您可以使用FadeInImage.assetNetwork()
,也可以根据需要自定义此卡。
/*
Get card per item
*/
getCard(BuildContext context, int index) {
return Card(
child: Container(
height: 300,
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: Image.network(
"url",
fit: BoxFit.fill,
),
)
],
),
));
}
您需要在alignment: Alignment.topCenter,
中设置 - FadeInImage.assetNetwork
以使图像触摸卡顶部。
body: ListView.builder(
itemCount: 10,
padding: const EdgeInsets.all(8.0),
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
FadeInImage.assetNetwork(
alignment: Alignment.topCenter, // add this
placeholder: 'dummyimage',
image: 'https://via.placeholder.com/500x300.png',
fit: BoxFit.fitWidth,
height: 300,
)
],
),
);
}),
输出:
与 - fit: BoxFit.fill,