加载后渐入网络图像的大小调整

问题描述

这是我问题的视频 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();
  }

我怎么才能让图像从屏幕上弹出的那一刻起就占据最小的空间，而不是在有时间调整大小之后？

谢谢。

解决方法

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

,

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();
  }

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