时间戳

首页 > 解决方案 > 使用 StreamBuilder 制作动画

flutter - 使用 StreamBuilder 制作动画

问题描述

项目

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

因此，由于用户输入更新非常快，这会迫使 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 次，超过显示刷新率。

有没有更好的办法？

标签： flutterdartflutter-animation

解决方案

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

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

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

推荐阅读