如何在多个小部件之间淡入和淡出答案

【问题标题】：How to have fade in and fade out between multi widgets如何在多个小部件之间淡入和淡出
【发布时间】：2019-08-21 12:15:31
【问题描述】：

我正在使用带有 5 个项目的底部导航栏，对于每个小部件，我应该从服务器加载一些数据，我想在项目之间淡入和淡出，但我不知道怎么做？，因为我认为项目不是我实现路由淡入淡出转换的新页面。我还为每个 Items 定义了一个 futureBuilder 来加载它的数据可以在 futureBuilder 的 ConnectionState.waiting 中做某事，但它没有淡入淡出过渡，并且过渡正在跳跃我还检查了与连接插件的互联网连接

我在处理它们时遇到了麻烦，因为我几乎是新手！

我很想知道处理它的最有效方法是什么。谢谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

也许AnimatedSwitcher 是您正在寻找的，它为它的孩子添加了一个隐式动画，因此每当您调用setState() 来更改它的孩子时，它会自动在它们之间启动淡入/淡出动画.观看本周小工具系列中的这段视频：

AnimatedSwitcher from Widget of the Week

另一种可能性是AnimatedOpacity，它可以通过改变其孩子的不透明度来实现类似的行为。以下是对AnimatedOpacity 小部件文档的参考：

AnimatedOpacity from Flutter dev documentation

【讨论】：

谢谢，这个小部件解决了过渡问题，还有你有什么想法可以将 UI 从 ConnectionState.waiting 女巫包含一个 circleProgressIndecator 更改为 ConnectionState.done 吗？
或者是否有任何像futureBuilder这样的小部件具有相同的加载数据行为并根据加载数据的状态显示UI但具有漂亮的动画？因为我想显示两次淡入淡出过渡：1-更改小部件 2-加载数据
我怀疑StreamBuilder 是您正在寻找的。您将需要更改可能围绕Future 构建的连接状态，并围绕Stream 重新构建它们，这样您就可以收听网络数据的变化。 StreamBuilder 将让您对 Stream 中的更改做出反应，并根据它们更新您的 UI。这是关于StreamBuilder 的Widget of the Week video，您可能会发现它很有用。但是，我建议您将此问题标记为已通过我的回答解决并打开另一个问题，以便人们轻松找到该主题。

【解决方案2】：

我知道这是一个非常老的问题，但我用类似的方法解决了：

  Widget dynWidget = CircularProgressIndicator();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: future,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            dynWidget = Text('Content loaded!');
          }
          return AnimatedSwitcher(
              duration: Duration(seconds: 1), child: dynWidget);
        });
  }

【讨论】：