Flutter 中的 AnimatedWidget 和 AnimatedBuilder答案

【问题标题】：AnimatedWidget and AnimatedBuilder in FlutterFlutter 中的 AnimatedWidget 和 AnimatedBuilder
【发布时间】：2019-01-12 15:50:50
【问题描述】：

大家好，我有个问题，不明白AnimatedWidget和AnimatedBuilder的区别。源码中的cmets如下：

AnimatedWidget：

/// For more complex case involving additional state, consider using
/// [AnimatedBuilder].

AnimatedBuilder：

/// For simple cases without additional state, consider using
/// [AnimatedWidget].

我想知道如何在它们之间进行选择，因为我不太了解文档，谢谢！

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

除了使用它所需的语法之外，它们之间没有真正的区别。

要清楚，这是AnimatedBuilder的代码：

class AnimatedBuilder extends AnimatedWidget {
  const AnimatedBuilder({
    Key key,
    @required Listenable animation,
    @required this.builder,
    this.child,
  }) : assert(builder != null),
      super(key: key, listenable: animation);

  final TransitionBuilder builder;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return builder(context, child);
  }
}

...是的，什么都不做

从这段代码中我们可以清楚地看到AnimatedBuilder 只是使用AnimatedWidget 的不同语法。由于AnimatedBuilder 是AnimatedWidget，它将所有布局逻辑委托给回调

所以最后，这真的取决于你。两者都做同样的事情。使用让你更易读的东西

【讨论】：

这...根本不正确。 AnimatedBuilder 始终使用相同的子实例，如果子实例不依赖于动画值，这可以大大减少建筑和绘画的数量。例如，在屏幕上移动快餐栏的翻译。
但是您也可以使用AnimatedWidget 来做到这一点。没有什么能阻止您将该“孩子”存储到您班级的字段中
@JonahWilliams 所有的XTransition 小部件，例如AlignTransition 都遵循这种模式：AnimatedWidget that take a child as parameter

【解决方案2】：

animatedWidget 和 animatedBuilder 执行与动画相关的相同工作。

在继续之前，您必须知道要创建动画，我们必须至少需要两件事1.动画本身和2.我们将在其上应用动画的小部件。

明确之间的区别是：

AnimatedWidget 只接受动画作为参数，而 AnimatedBuilder 接受两个参数“child”和“animation”。
AnimatedWidget 实现为扩展 AnimatedWidget 的类。例如

abc 类扩展了 AnimatedWidget

而 AnimatedBuilder 被实现为类中的小部件。例如

child : AnimatedBuilder(.....),

现在，虽然两者都做同样的工作，但都有不同的做事方式。在 AnimatedWidget 中它有自己的孩子，所以我们只需要传递动画。而在 AnimatedBuilder 中，我们需要同时传递孩子和动画。

以 AnimatedWidget 为例，您可以对任意数量的具有不同值的动画使用相同的 AnimatedWidget 类。

现在你会想，如果 AnimatedWidget 可以做我们为什么需要 AnimatedBuilder 的事情？

答案很简单

更改 AnimatedWidget 中的动画需要更改呈现徽标或我们的孩子的小部件。所以 AnimatedBuilder 所做的是提供一个选择，即明确地传递您选择的孩子和动画。

【讨论】：