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

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
         }
     }
  }

}

此代码并非用于编译，而是用于显示回答问题的可能选项。