flutter - 产生 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正确呈现 Text(缺少它是因为 Hero 将您提供的 child 放在 Overlay 中，并且它不会从您的 Scaffold 继承 Material)。

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

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

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