时间戳

首页 > 解决方案 > Flutter - 在导航期间创建固定 AppBar 的最佳实践是什么

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

问题描述

在原生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
    ),
)

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

标签： flutterflutter-layoutflutter-animation

解决方案

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

解决方案是将 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 已经实现了）

推荐阅读