使用 StreamBuilder 制作动画答案

【问题标题】：Animation with StreamBuilder使用 StreamBuilder 制作动画
【发布时间】：2019-11-18 16:06:56
【问题描述】：

项目

嗨，我用颤振创建了一个简单的应用程序，它可以根据用户垂直拖动使用流构建器更改容器的高度。

因此，由于用户输入更新非常快，这会迫使 streambuider 重新构建多次，从而创建动画效果。

代码

    final StreamController streamController = StreamController<double>();
    double height = 0.0;

    StreamBuilder(
      initialData: 0.0,
      stream: streamController.stream,
      builder: (context, snapshot) {
        return Container(
          height: snapshot.data,
        );
      },
    ),

     ....

     height += (dragUpdateDY);
     streamController.add(height);

问题

尽管代码按预期工作，但我一直认为这不是一个好的解决方案，因为它会迫使 UI 在一秒钟内重建不可预测的时间，甚至可能超过 60 次，超过显示刷新率。

有没有更好的办法？

【问题讨论】：

标签： flutter dart flutter-animation

【解决方案1】：

这完全没问题，因为build 实际上不是被你调用的！它总是被框架调用，这就是为什么它不会被调用超过 60 Hz。
这是真的，因为StreamBuilder 在内部调用State.setState，它执行以下操作：

调用setState 会通知框架此对象的内部状态已发生更改，可能会影响此子树中的用户界面，这会导致框架为此State 对象安排build。

如果您想要更细粒度的控制，您可以创建自己的RenderObject，并在需要时根据GestureRecognizers 调用markNeedsPaint 或markNeedsLayout。

【讨论】：