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

Question

我正在尝试使用 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();
          }
        },
      ),
    );
    ...

Answer 1

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

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

Answer 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();
    );
  }
),