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

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

Answer 2

尝试此代码。从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,
            ),
          )
        ],
      ),
    ));
  }

Answer 3

您需要在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,
                      )
                    ],
                  ),
                );
              }),

输出：

与- f it: BoxFit.fill,

颤抖的容器内的图像

3 个答案: