在颤振的容器内的图像

问题描述 投票:1回答:3

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

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

flutter
3个回答
2
投票

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

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

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

以上答案是我通过反复试验的理解。如果我对自己的理解不对,请纠正我


1
投票

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

0
投票

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

输出:

enter image description here

与 - fit: BoxFit.fill,

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.