如何为 StreamBuilder 生成的小部件设置动画？

Posted 2023-02-23

【中文标题】如何为 StreamBuilder 生成的小部件设置动画？

【英文标题】：How to animate widget generated by StreamBuilder?

【发布时间】：2019-08-06 05:15:31

【问题描述】：

我正在尝试使用 StreamBuilder 生成屏幕内容。它在 bloc 模式下运行良好，但有一件事我正在努力解决。 如何对生成的内容（WidgetA 和 WidgetB）之间的变化进行动画处理，如淡入淡出或滑动效果？

    ...
    return AnimatedSwitcher(
      duration: Duration(seconds: 4),
      child: BlocBuilder<ContentEvent, int>(
        bloc: bloc,
        builder: (context, contentID) 
          if (contentID == 1) 
            return WidgetA();
           else 
            return WidgetB();
          
        ,
      ),
    );
    ...

【问题讨论】：

见AnimatedSwitcher

@pskink 我已经尝试过这种方法，但是当 BlocBuilder 被包裹在 AnimatedSwitcher 中时，它根本没有动画。

AnimatedSwitcher 工作正常，然后发布您的代码

@pskink 我很可能用错了。 :) 我已经用我当前的 AnimatedSwitcher 解决方案更新了帖子中的代码。

试试：builder: (context, contentID) return AnimatedSwitcher(...);

【参考方案1】：

你可以试试 AnimatedCrossFade 它接受 2 个孩子，持续时间和状态（AnimatedCrossFadeState.showFirst 和 AnimatedCrossFadeState.showSecond），它会在两个孩子之间动画淡入淡出。

文档：https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html

【参考方案2】：

您的 BlocBuilder 应该包裹 AnimatedSwitcher 而不是相反。

AnimatedSwitcher 的动画发生在其直接子级更改时。但在你的情况下，直接孩子是 always BlocBuilder。

StreamBuilder(
  stream: stream,
  builder: (context, snapshot) 
    return AnimatedSwitcher(
      duration: const Duration(seconds: 4),
      child: snapshot.hasData
        ? Text(snapshot.data)
        : CircularProgressIndicator();
    );
  
),

【讨论】：

谢谢！这个我找了很久

请注意，如果类型相同（例如，如果您将切换器的小部件包装在 Container 或 Centre 中），则除非您给它们不同的键，否则动画不会发生。见api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html