失败的断言宽度 > 0.0'：在 FittedBox 的 Container 中放置单个图像时不正确

Question

当我将 Image.network 放置在作为 FittedBox 子项的 Row 或 Container 中时，查看它会导致错误/崩溃。

FittedBox 实际上使用一个函数作为它的子函数，它根据图像的数量返回一个小部件。当有两个图像时，它返回一个 Row，其中每个图像作为其子级，它可以正常工作，但是当只有一个时，无论我返回一个以图像为子级的 Container 还是返回一个带有单个子级的 Row 都会发生错误是形象。

            Container(
              child: FittedBox(child: status.statusFiles()),
            ),

状态文件：

    return Container(
        child: 
          Image.network(
            this.files[0].thumbnailUrl,
            fit: BoxFit.contain,
          ),
        );

我希望 FittedBox 包含适合的最大尺寸的图像，但在呈现小部件时出现以下错误

I/flutter (26617): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter (26617): The following assertion was thrown during performLayout():
I/flutter (26617): 'package:flutter/src/rendering/box.dart': Failed assertion: line 307 pos 12: 'width > 0.0': is not
I/flutter (26617): true.
...
I/flutter (26617): When the exception was thrown, this was the stack:
I/flutter (26617): #2      BoxConstraints.constrainSizeAndAttemptToPreserveAspectRatio (package:flutter/src/rendering/box.dart:307:12)
I/flutter (26617): #3      RenderFittedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:2275:26)
I/flutter (26617): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #5      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (26617): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #7      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:798:17)
I/flutter (26617): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #9      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11)
...
I/flutter (26617): The following RenderObject was being processed when the exception was fired:
I/flutter (26617):   RenderFittedBox#d752c relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26617):   creator: FittedBox ? Container ? Column ? Expanded ? Row ? Padding ? Container ?
I/flutter (26617):   RepaintBoundary-[<16>] ? IndexedSemantics ? NotificationListener<KeepAliveNotification> ?
I/flutter (26617):   KeepAlive ? AutomaticKeepAlive ? ?
I/flutter (26617):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
I/flutter (26617):   constraints: BoxConstraints(0.0<=w<=339.4, 0.0<=h<=Infinity)
I/flutter (26617):   size: MISSING
I/flutter (26617):   fit: contain
I/flutter (26617):   alignment: center
I/flutter (26617):   textDirection: ltr
I/flutter (26617): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (26617):   RenderSemanticsAnnotations#df6f3 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (26617):     RenderImage#63da1 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (26617): ????????????????????????????????????????????????????????????????????????????????????????????????????

Answer 1

以前的解决方案都不适合我，因为我使用了 fit: Boxfit.fitWidth并且我确实需要祖先的高度来依赖图像宽度。

我的解决方案是将图像包装在 ConstrainedBox 中并手动应用分钟。高度和宽度为 1：

ConstrainedBox(
      constraints: BoxConstraints(maxHeight: maxHeight),
      child: Hero(
        tag: 'SettingsPic',
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(bottom: Radius.circular(25)),
              boxShadow: [BoxShadow(
                  color: Colors.black.withOpacity(0.2),
                  blurRadius: 10
              )]
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(25)),
            child: FittedBox(
              fit: BoxFit.fitWidth,
              alignment: Alignment.bottomCenter,
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 1, minHeight: 1), // here
                child: Image.asset(
                  'resources/images/background.png',
                ),
              ),
            ),
          ),
        ),
      ),
    )

Answer 2

Sizebox.expand 解决了我的问题

Container(
  width: 50,
  height: 50,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(3),
    color: color,
  ),
  child: SizedBox.expand(
    child: FittedBox(
      child: Image.file(File(path)),
      fit: BoxFit.fill,
    ),
  ),
)

Answer 3

这不起作用的原因是因为它不知道图像的宽度，因为在布局组件时尚未加载图像。它需要图像的宽度来进行计算。当您进行热重载时，Flutter 将在此时检索图像。

在这种情况下，我所做的是查看所有图像并找出尺寸并将它们硬编码到文件中。我不喜欢这个解决方案，但它确实解决了我的错误。

我假设只有在出于性能原因需要时才从资产目录中检索资产（即，如果您有很多图像，它会导致手机启动时间延迟）

    Expanded(
      child: Column(
        children: [
          FittedBox(
            fit: BoxFit.scaleDown,
            child: Image.asset("assets/foot.png", width: 100, height: 100,),
          ),
        ],
      ),
    ),