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

Question

我正在尝试从互联网加载图像，但我想显示一个占位符，直到加载完成。
如何确定占位符的大小以匹配图像的实际大小？
来自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
         }
     }
  }

}

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