Flutter：确定占位符的大小以匹配图像的实际大小

Question

我正在尝试从Internet加载图像，但我想显示一个占位符，直到加载完成。 如何确定占位符的大小以匹配图像的实际大小？ api上图像的宽度和高度分别为2000、3000，如何转换这些值？

Answer 1

这个问题有几个部分，

首先，您应该通过多种方法之一从网络上下载图片。

1. https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html

2. https://docs.flutter.io/flutter/widgets/Image/Image.network.html

3. 获取字节并使用此https://docs.flutter.io/flutter/widgets/Image/Image.memory.html

转换为图像

这是您应该使用的小部件。

您应该将此小部件用作占位符。

https://docs.flutter.io/flutter/widgets/SizedBox-class.html

这是一个可能显示加载动画的孩子

https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html

要显示它，您可以完成FutureBuilder或

Image im = null;
Map imageDimensions = null;
initState(){
    fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
    somefuntion.fetch().then((image) => setState(){im = image;})
}

Widget build(buildContext context){
   var width =  imageDimensions["width"];
   var height = imageDimensions["height"];
   var placeholderColor = imageDimensions["color"];
   var dimensionsLoaded = imageDimensions != null;
   var imageLoaded = im != null;
   return if(imageLoaded)
      Image..... 
     else {
         if(dimensionsLoaded) {
             SizedBox(
               width: width,
                height: height,
                child: const Card(child: Container(color: Color(placeholderColor)),
             )
         } else {
             //neigher image or dimensions are Loaded. Nothing you can do
         }
     }
  }

}

此代码不是要编译的，而是要显示回答问题的可能选项。