如何处理 FittedBox 中的动态图像答案

【问题标题】：How to handle dynamic images within a FittedBox如何处理 FittedBox 中的动态图像
【发布时间】：2020-02-19 15:37:55
【问题描述】：

我目前正在实现一个下拉按钮作为脚手架的标题。

在此下拉菜单中，某些选项没有相关图像，因此仅显示文本。我让它工作得很好，我唯一的问题是，当应用程序运行（不是热重新加载）时总是会抛出一个错误，因为图像不会立即加载，这意味着 FittedBox 正在尝试适应一个空的小部件，一旦它加载它就可以了，然后热重新加载也可以正常工作，没有错误，因为图像已经加载。这是我的 DropDownMenuItems 的代码：

return DropdownMenuItem(
                    value: company.id.toString(),
                    child: Center(
                        child: FittedBox(
                            child: Center(
                                child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.all(10),
                          child: (config.companyLogos[company.id] != null)
                              ? FittedBox(
                                  child: Image.asset(
                                    config.companyLogosPath +
                                        config.companyLogos[company.id],
                                    height: 50,
                                  ),
                                  fit: BoxFit.contain,
                                )
                              : FittedBox(
                                  child: Text(
                                  company.name,
                                  style: TextStyle(fontSize: 30),
                                )),
                        ),
                      ],
                    )))));

这是应用程序运行时引发的错误，我确信这是由于我上面描述的：

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: 'package:flutter/src/rendering/box.dart': Failed assertion: line 313 pos 12: 'width > 0.0': is not
flutter: true.

考虑的解决方案：

一种可能的解决方案是提供图像的宽度，我可以将其包含在我的 companyLogos 地图中，方法是使其成为地图地图并在子地图中包含文件名和宽度。

但是，我已经尝试过了，但它似乎不起作用，它只会使我的图像比我使用未设置的宽度小很多。

我没有明确定义宽度以使其保持其纵横比同时仍然适合行。

我可能在这里错过了关于如何在颤振/飞镖中处理图像的技巧，任何帮助将不胜感激，谢谢！

【问题讨论】：

我无法想象将FittedBox 与Image 小部件结合起来有什么意义，另一种情况是与Text - 这里FittedBox 非常方便
@pskink 由于这些图像是动态的并且可以是任何大小，我需要 FittedBox 以确保它适合下拉菜单，您能提出替代方案吗？将不胜感激
“因为这些图像是动态的，并且可以是任意大小” - 没关系 - Image 对它们负责
@pskink 谢谢我不知道图片有这个功能，谢谢！
当然，欢迎您

标签： ios swift flutter kotlin dart

【解决方案1】：

感谢@pskink，我已经解决了这个问题。

我通过完全废弃 FittedBox 并使用 Image 的 'fit:' 属性解决了这个问题。

这是我的固定代码：

return DropdownMenuItem(
                    value: company.id.toString(),
                    child: Center(
                        child: FittedBox(
                            child: Center(
                                child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.all(10),
                          child: (config.companyLogos[company.id] != null)
                              ? Container(
                                  child: Image.asset(
                                  config.companyLogosPath +
                                      config.companyLogos[company.id],
                                  height: 50,
                                  fit: BoxFit.contain,
                                ))
                              : FittedBox(
                                  child: Text(
                                  company.name,
                                  style: TextStyle(fontSize: 30),
                                )),
                        ),
                      ],
                    )))));

【讨论】：