英雄动画制作RenderBox溢出

时间：2019-06-27 14:57:15

标签： flutter dart

我正在使用Hero组件在两个页面之间创建动画。 Hero组件用于包装Image小部件（没问题）和Container小部件（有问题）。

screen capture

将引发以下溢出错误：

 ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞════════════════════════════════════════
I/flutter ( 4256): The following message was thrown during layout:
I/flutter ( 4256): A RenderFlex overflowed by 104 pixels on the right.

第一页

Positioned(
  width: MediaQuery.of(context).size.width * 0.7,
  height: MediaQuery.of(context).size.height * 0.45,
  top: 160.0,
  left: MediaQuery.of(context).size.width * 0.04,
  child: Hero(
     tag: i.id, 
     child: Container( ...)
  )
)

第二页

Hero(
  tag: this.i.departure,
  child: Container(
     margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.25),
     height: MediaQuery.of(context).size.height,
     decoration: cardDecoration,
   ),
 ),

3 个答案:

答案 0 :(得分：1)

其原因不是Container小部件本身，而是内容。
您共享的GIF清楚地表明，其中的Text并未像往常一样呈现，但太大了。这是由缺少Material祖先引起的，该祖先将包含必要的InheritedWidget来正确呈现Text（因为Hero放置了{{1} }您在child中提供，并且那里没有从您的Overlay继承Material）。

因此，您需要添加一个Scaffold小部件来解决您的问题。

Material

我提供了MaterialType.transparency，以防止它影响基础UI。

答案 1 :(得分：1)

对于遇到这个问题的任何人，我已经对Hero小部件进行了数十小时的研究。我最终以这种方式完成了。

为什么会出错

Hero小部件将从您单击的小部件扩展到导航到的小部件。因此，在过渡过程中，小部件将被约束并塞在一个小巧的盒子里，盒子很小。并且如果您使用固定大小的小部件（例如MediaQuery.of(context).size.height * 0.25），它使用设备屏幕尺寸。可能会出现该错误。

解决方法

要解决此问题，请确保要导航到的每个Hero子代都具有弹性大小。例如，将每个孩子用Row包裹在Expanded中，然后使用flex，它将通过弹性编号分为多个部分。或使用FractionallySizedBox。

答案 2 :(得分：0)

我找到了this issue on Github，所以我将此属性添加到了英雄小部件中：

flightShuttleBuilder: (BuildContext flightContext,
                                Animation<double> animation,
                                HeroFlightDirection flightDirection,
                                BuildContext fromHeroContext,
                                BuildContext toHeroContext,){

                              return SingleChildScrollView(
                                child: fromHeroContext.widget,
                              );},

，视觉错误消失。终端中仍然显示错误：

I/flutter ( 8073): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8073): The following assertion was thrown during performLayout():
I/flutter ( 8073): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 8073): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 8073): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 8073): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 8073): space in the vertical direction.
I/flutter ( 8073): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 8073): cannot simultaneously expand to fit its parent.
I/flutter ( 8073): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 8073): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 8073): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 8073): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 8073): constraints provided by the parent.
I/flutter ( 8073): The affected RenderFlex is:
I/flutter ( 8073):   RenderFlex#2944e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073): The creator information is set to:
I/flutter ( 8073):   Column ← ContentTripTease ← DecoratedBox ← Container ← KeyedSubtree-[GlobalKey#338b3] ← Hero ←
I/flutter ( 8073):   _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ← _GestureSemantics
I/flutter ( 8073):   ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ← ⋯
I/flutter ( 8073): The nearest ancestor providing an unbounded width constraint is:
I/flutter ( 8073):   _RenderSingleChildViewport#43f3a NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):   creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ←
I/flutter ( 8073):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ←
I/flutter ( 8073):   Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#62cca] ← RepaintBoundary ← CustomPaint ←
I/flutter ( 8073):   RepaintBoundary ← ⋯
I/flutter ( 8073):   parentData: <none> (can use size)
I/flutter ( 8073):   constraints: BoxConstraints(w=258.8, h=341.4)
I/flutter ( 8073):   size: MISSING
I/flutter ( 8073): See also: https://flutter.dev/layout/
I/flutter ( 8073): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 8073):   https://flutter.dev/debugging/#rendering-layer
I/flutter ( 8073):   http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 8073): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 8073):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 8073): 
I/flutter ( 8073): When the exception was thrown, this was the stack:
I/flutter ( 8073): #0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:690:11)
I/flutter ( 8073): #1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:711:10)
I/flutter ( 8073): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #5      _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:497:13)
I/flutter ( 8073): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #7      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #9      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #19     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #21     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #23     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #25     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #27     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #29     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #30     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #31     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:549:15)
I/flutter ( 8073): #32     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1519:7)
I/flutter ( 8073): #33     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:766:18)
I/flutter ( 8073): #34     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:347:19)
I/flutter ( 8073): #35     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
I/flutter ( 8073): #36     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
I/flutter ( 8073): #37     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
I/flutter ( 8073): #38     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
I/flutter ( 8073): #39     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:864:5)
I/flutter ( 8073): #43     _invoke (dart:ui/hooks.dart:219:10)
I/flutter ( 8073): #44     _drawFrame (dart:ui/hooks.dart:178:3)
I/flutter ( 8073): (elided 3 frames from package dart:async)
I/flutter ( 8073):
I/flutter ( 8073): The following RenderObject was being processed when the exception was fired:
I/flutter ( 8073):   RenderFlex#2944e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):   creator: Column ← ContentTripTease ← DecoratedBox ← Container ← KeyedSubtree-[GlobalKey#338b3] ←
I/flutter ( 8073):   Hero ← _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ←
I/flutter ( 8073):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ← ⋯
I/flutter ( 8073):   parentData: <none> (can use size)
I/flutter ( 8073):   constraints: BoxConstraints(w=258.8, 0.0<=h<=Infinity)
I/flutter ( 8073):   size: MISSING
I/flutter ( 8073):   direction: vertical
I/flutter ( 8073):   mainAxisAlignment: start
I/flutter ( 8073):   mainAxisSize: max
I/flutter ( 8073):   crossAxisAlignment: center
I/flutter ( 8073):   verticalDirection: down
I/flutter ( 8073): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 8073):   RenderPadding#7266f relayoutBoundary=up3 NEEDS-PAINT
I/flutter ( 8073):     RenderFlex#36165 relayoutBoundary=up4 NEEDS-PAINT
I/flutter ( 8073):       RenderPadding#35f21 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 8073):         RenderParagraph#a364d relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 8073):       RenderPadding#8a295 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 8073):         RenderFlex#59634 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#2ff9e relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#17df3 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#f9eb4 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):   RenderConstrainedBox#cf91c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):     RenderPadding#9142e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):       RenderSemanticsAnnotations#09e8c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):         _RenderInputPadding#a87c6 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):           RenderConstrainedBox#07355 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073): ════════════════════════════════════════════════════════════════════════════════════════════════════

此错误是个大问题吗？

相关问题
最新问题