淡入网络图像在加载后调整大小答案

【问题标题】：Fade In Network Image resizes after loading in淡入网络图像在加载后调整大小
【发布时间】：2021-01-19 21:22:14
【问题描述】：

这是我的问题的视频 https://www.youtube.com/watch?v=wskX_bZNExw

如果您注意到，在加载网络图像后，它会调整大小（通常会删除空白区域）。

  Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null && thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return Container(
        width: double.maxFinite,
        child: FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: image.url.toString(),
        ),
      );
    }
    return Container();
  }

我怎样才能让图像从它在屏幕上弹出的那一刻起只占用 MINIMUM 空间，而不是在它有时间调整大小之后？

谢谢。

【问题讨论】：

标签： flutter dart flutter-layout flutter-image flutter-layoutbuilder

【解决方案1】：

您可以将周围的Container 的height 设置为固定值，并在您的FadeInImage 中使用fit: BoxFit.fitheight。

【讨论】：

嗨，是的，设置高度肯定会解决这个问题。但是，某些图像在纵横比方面会完全被夸大。关于保持正常图像高度的任何想法？
好吧，Boxfit 会确保您看到完整的图像。我不认为原始图像大小和不能同时调整大小。

【解决方案2】：

Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null && thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return FadeInImage.memoryNetwork(
        fadeInDuration: Duration(milliseconds: 200),
        placeholder: kTransparentImage,
        image: image.url.toString(),
        width: double.maxFinite,
        fit: BoxFit.fitWidth,
        height: (image.height.toDouble() / image.width.toDouble()) * MediaQuery.of(context).size.width,
      );
    }
    return Container();
  }

我想通了，您想将高度除以宽度，然后将其乘以容器的宽度（在这种情况下，我希望照片的边缘与手机对齐）。

【讨论】：