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

FittedBox实际上使用函数作为其子项,该函数根据图像数返回小部件。当有两个图像时,它返回一个以每个图像作为其子元素的行,该行可以正常工作,但是,当只有一个图像时,无论是返回以该图像作为其子元素的Container还是一个具有单个子元素的行,都会发生错误是形象。

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

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): ════════════════════════════════════════════════════════════════════════════════════════════════════

最佳答案

以前的解决方案都不适合我,因为我使用了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',
                ),
              ),
            ),
          ),
        ),
      ),
    )

10-08 07:08