颤动容器内的图像

Question

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

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

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

Answer 1

我认为我们需要为图像提供宽度和高度，然后才能使框适合工作。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,
                      ),
                    ],
                  ),
                )

以上答案是我自己通过反复试验的理解。如果我的理解有误，请纠正我