如何使英雄小部件在路線轉換中飛到其他小部件下方

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 進行排序。

英雄在導航器的疊加層中“飛”。 因此，另一種方法可能是將您的應用欄和底部欄放在導航器的頂部（例如使用上面的堆棧）。

當然，這些都不是很好。