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

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

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

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

}

这段代码不是用来编译的，而是用来展示回答问题的可能选项。