如何使英雄小部件在路线转换中飞到其他小部件下方

Question

如何让 hero 小部件在路由转换中飞到appBar和bottomBar小部件下方。 我也曾尝试用 hero 扭曲其他小部件，但没有运气。

Answer 1

在过渡期间，Flutter 按照在小部件（元素）树中找到的顺序放置英雄； 最后一个在上面。 因此，您可能能够以这样一种方式组织您的屏幕，即在树中找到应用栏和底部栏英雄的时间要晚于包含其他英雄的主体。 例如使用Stack ：

Stack(
  children: [
    Body(),
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: AppBar(),
    ),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: BottomBar(),
    ),
  ],
)

这依赖于 Flutter 的 heros 的实现细节，所以比较 hacky。

另一种方法是复制 Flutter 的 HeroController、Hero 和相关代码并对其进行修改，以通过 Hero 小部件的新“z-index”属性对 Hero OverlayEntries 进行排序。

英雄在导航器的叠加层中“飞”。 因此，另一种方法可能是将您的应用栏和底部栏放在导航器的顶部（例如使用上面的堆栈）。

当然，这些都不是很好。