当我将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',
),
),
),
),
),
),
)