Flutter - 在导航期间创建固定 AppBar 的最佳实践是什么

Question

在原生android开发中，常用FragmentTransaction来制作导航动画，其中actionBar的位置是固定的(但是actionBar的内容发生了变化)，actionBar下面的fragment会做一个过渡动画(像滑入或滑出)。

简单来说，AppBar和body执行不同的过渡动画。在 flutter 中，创建此类动画的最佳实践是什么？

目前我能想到的解决方案是在 Scaffold.body 中使用导航并使用 Stream + StreamBuilder 启动 AppBar 重绘。类似于以下代码。

Scaffold(
    appBar: StreamBuilder<Int>(
        stream: Bloc.of(context).currentFragmentId
        builder: //Some logic to decide which AppBar is appropriate
    ),
    body: Navigator(
        //Navigation between fragments
    ),
)

但这真的很奇怪。那么有没有最佳实践来做到这一点？请告诉我!

Answer 1

好吧，因为目前没有可用的答案。我将在这里分享我的解决方案，虽然它不是那么优雅。

解决方案是将 AppBar 包装在 Hero 小部件中。由于 Scaffold 仅将 PreferedSize 小部件作为应用栏，因此需要进行一些自定义。

class HeroAppBar extends StatelessWidget implements PreferredSizeWidget {
//...
  @override
  final Size preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0));
//...
  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: tag,
      child: AppBar(
        //...
      ),
    );
  }
}

并确保您的 Navigator 实现了 HeroController。 (默认导航器已经实现了)