生成 RenderBox 溢出的英雄动画

Question

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

抛出以下溢出错误：

 ??? 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,
   ),
 ),

Answer 1

这样做的原因不是Container小部件本身，而是内容。
您分享的 GIF 清楚地表明它的Text内部没有像往常一样渲染，而是过大。这是由缺少Material祖先引起的，它包含正确InheritedWidget呈现所需的's Text（它丢失是因为Hero将child您提供的放在 中，Overlay并且它没有Material从您的继承 a Scaffold）。

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

Hero(
  tag: tag,
  child: Material(
    type: MaterialType.transparency,
    child: .. // in your cause `Container(..)`
  ),
)

我提供MaterialType.transparency以防止它影响底层 UI。

Answer 2

我在 Github 上发现了这个问题，所以我将此属性添加到了 Hero Widget 中：

\n\n

flightShuttleBuilder: (BuildContext flightContext,\n                                Animation<double> animation,\n                                HeroFlightDirection flightDirection,\n                                BuildContext fromHeroContext,\n                                BuildContext toHeroContext,){\n\n                              return SingleChildScrollView(\n                                child: fromHeroContext.widget,\n                              );},\n

\n\n

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

\n\n

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

\n\n

这个错误是一个大问题吗？

\n