Question

我正在尝试使用StreamBuilder生成屏幕内容。它沿集团模式运行得很好，但是我正在努力解决一件事。如何为淡出或滑动效果之类的生成内容（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

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

AnimatedSwitcher的动画在其直接子代更改时发生。但是，在您的情况下，直子始终是 BlocBuilder。

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

Answer 2

您可以尝试使用AnimatedCrossFade 它接受2个子项，持续时间和状态（AnimatedCrossFadeState.showFirst和AnimatedCrossFadeState.showSecond），并将为两个子项之间的淡入淡出设置动画。

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

如何为StreamBuilder生成的小部件制作动画？

2 个答案: