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

Question

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

Answer 1

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

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

当然，这些都不是很好。