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

Question

如何让 hero widget 在路由转换中飞到 appBar 和 bottomBar widget 下面。我也曾尝试用 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英雄的实现细节，所以比较hacky。

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

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

None 这些当然很棒。

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

How to make hero widget fly below other widget in route transition

flutter

flutter-animation