gpt4 book ai didi

flutter - flutter 中容器内的图像

转载 作者:IT王子 更新时间:2023-10-29 06:51:11 24 4
gpt4 key购买 nike

我想在卡片小部件中显示网络图像。我希望图像具有卡片的宽度和一些固定的高度。下面是代码。

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,
)
],
),
);
})

当我给图像一个固定的高度时,它表现得很奇怪。图像在卡片内部居中,顶部和底部有一些填充。我希望图像与顶部对齐。

the issue

最佳答案

我认为我们需要先为图像指定宽度和高度,然后才能使框适合。 box fit 属性将适合盒子,但为此我们必须定义盒子。下面的代码对我有用。我已经用不同大小的图像尝试过它,它总是采用卡片的最大宽度和指定的高度。

上述解决方案可能不适用于所有类型的图像。

         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,
),
],
),
)

以上答案是我自己摸索得出的。如果我的理解有误,请指正

关于flutter - flutter 中容器内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54893321/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com