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

Question

如何让英雄小部件在路由转换中飞到 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 进行排序。

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

当然这些都不是很好。