时间戳

首页 > 解决方案 > Hero 动画产生 RenderBox 溢出

flutter - Hero 动画产生 RenderBox 溢出

问题描述

我正在使用该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,
   ),
 ),

标签： flutterdart

解决方案

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

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

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

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

推荐阅读