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

Posted 2023-02-23

【中文标题】确定占位符的大小以匹配图像的实际大小

【英文标题】：determine the size of placeholder to match the actual size of the image

【发布时间】：2019-04-23 03:05:05

【问题描述】：

我正在尝试从互联网加载图像，但我想在加载完成之前显示一个占位符。 如何？ 来自api的图像的宽度和高度分别为2000、3000。如何转换这些值？

【问题讨论】：

你事先知道尺寸吗？我认为您无法在加载图像之前弄清楚图像的大小

该api提供图片的宽高例如2000w, 3000h

我不知道如何使用这些值

好的，我会试着回答这个问题。您需要示例代码吗？我可以告诉你需要的课程

没关系

【参考方案1】：

这个问题有几个部分，

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

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

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

使用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
         
     
  

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

【讨论】：

哪一部分？您正在询问如何制作占位符小部件。您没有提供有关 api 等的信息

"width": 5245, "height": 3497, "color": "#60544D"，这是 API 响应的一部分，我需要一种方法来利用这些值

好的，我将编辑我的回复。我的大部分答案都是一样的

伙计！我不能在颤振中使用 5245,3497 的宽度和高度，我正在寻求一种方法来转换这些值以便能够使用它们

老兄，你一直在修改你的问题。大小的盒子应该接受双精度数和浮点数