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

【问题标题】：Flutter - What's the best practice to create a fixed AppBar during navigationFlutter - 在导航期间创建固定 AppBar 的最佳实践是什么
【发布时间】：2019-05-09 22:49:50
【问题描述】：

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

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

目前我可以想到在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
    ),
)

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

【问题讨论】：

但是scaffold里面的PageView不能访问AppBar。并且 PageView 不能执行 hold/slide_up 动画。
PageView 将成为脚手架的主体，因此在所有页面中保持 appbar 相同——就动画而言——您可以自定义它。
您可以使用 GlobalKey 来更新或刷新应用栏，您可以使用 body 来显示您的片段。

标签： flutter flutter-layout flutter-animation

【解决方案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。（Default Navigator 已经实现了）

【讨论】：