SliverAppBar 中的动画 => 动态调整栏的大小

Question

我得到了一个 SliverAppBar，里面有一个 AnimatedContainer。此动画容器的高度会在运行时发生变化，因此容器会以动画方式调整其大小。我的问题是，我的 SliverAppBar 的 expandedHeight 已修复。但这需要调整模拟我的动画容器。

有没有办法将 SliverAppBar 设置为“height is always according to child”之类的？ AnimatedContainer 没有回调，它在调整大小时为我提供每一个变化。如果有这样的回调，我可以自己相应地更改 SliverAppBar 的 expandedHeight 属性。

知道如何解决我的问题吗？谢谢！

return SliverAppBar(
      elevation: 0,
      snap: true,
      pinned: false,
      floating: true,
      forceElevated: false,
      primary: false,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.white,
      expandedHeight: _eHeight,
      flexibleSpace: Column(children: <Widget>[
        AnimatedContainer(
            onEnd: onTopBarsAnimationEnd,
            height: _trending
                ? _tabBarHeight: _tabBarHeight + topicsHeight,
            duration: Duration(milliseconds: 800),
            curve: Curves.fastOutSlowIn,
            child: // some child
            )
        ]
    )
)

编辑 - 这是一张显示我想要实现的目标的 gif：

Answer 1

如果您检查 AnimatedContainer docs，他们会说：

This class is useful for generating simple implicit transitions between different parameters to Container with its internal AnimationController. For more complex animations, you'll likely want to use a subclass of AnimatedWidget such as the DecoratedBoxTransition or use your own AnimationController.

此处，'implicit' 表示您不会控制动画，因此您将无法访问 AnimationController class that is going to allow you to listen the animation steps. To do it, you are going to need something like AnimatedWidget。

深入了解 AnimationController 会发现它继承自 ImplicitlyAnimatedWidget，文档说：

ImplicitlyAnimatedWidgets (and their subclasses) automatically animate changes in their properties whenever they change. For this, they create and manage their own internal AnimationControllers to power the animation. While these widgets are simple to use and don't require you to manually manage the lifecycle of an AnimationController, they are also somewhat limited: Besides the target value for the animated property, developers can only chose a duration and curve for the animation. If you require more control over the animation (e.g. you want to stop it somewhere in the middle), consider using a AnimatedWidget or one of its subclasses. These widget take an Animation as an argument to power the animation. This gives the developer full control over the animation at the cost of requiring you to manually manage the underlying AnimationController.

因此，您需要创建 AnimatedController 对象并将其传递给 AnimatedWidget。您可以在 docs.

中查看示例

最后，要在每个动画步骤中做一些事情，您需要使用它的方法 addListener 向 AnimatedController 添加一个侦听器函数，这通常在您的 initState 方法中完成小部件。

SliverAppBar 中的动画 => 动态调整栏的大小

Animation in SliverAppBar => resize bar dynamically

flutter

flutter-layout

flutter-sliver