时间戳

首页 > 解决方案 > SliverAppBar 中的动画 => 动态调整条形

flutter - SliverAppBar 中的动画 => 动态调整条形

问题描述

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

有没有办法将 SliverAppBar 设置为“高度始终根据孩子”或类似的东西？AnimatedContainer 没有回调，它在动画调整大小时给了我所有的变化。如果有这样的回调，我可以expandedHeight自己更改 SliverAppBar 的属性。

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

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 显示我想要实现的目标： 在此处输入图像描述

标签： flutterflutter-layoutflutter-sliver

解决方案

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

这个类对于在不同参数到 Container 及其内部 AnimationController之间生成简单的隐式转换非常有用。对于更复杂的动画，您可能希望使用AnimatedWidget的子类，例如 DecoratedBoxTransition 或使用您自己的 AnimationController。

在这里，“隐式”意味着您不会控制动画，因此，您将无法访问允许您收听动画步骤的AnimationController类。为此，您将需要类似AnimatedWidget的东西。

对 AnimationController 的深入研究表明它继承自 ImplicitlyAnimatedWidget，文档说：

ImplicitlyAnimatedWidgets（及其子类）会在其属性发生变化时自动对其进行动画处理。为此，他们创建和管理自己的内部 AnimationController来为动画提供动力。虽然这些小部件易于使用并且不需要您手动管理 AnimationController 的生命周期，但它们也有一定的局限性：除了动画属性的目标值之外，开发人员只能选择动画的持续时间和曲线。如果您需要对动画进行更多控制（例如，您想在中间某处停止），请考虑使用AnimatedWidget或其子类之一。这些小部件以 Animation 作为参数来驱动动画。这使开发人员可以完全控制动画，但代价是需要您手动管理底层 AnimationController。

因此，您需要创建 AnimatedController 对象并将其传递给 AnimatedWidget。您可以在docs中查看示例。

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

推荐阅读