Flutter/Dart - 加载未来时 CircularProgressIndicator 的透明背景？答案

【问题标题】：Flutter/Dart - Transparent Background to CircularProgressIndicator on a Loading Future?Flutter/Dart - 加载未来时 CircularProgressIndicator 的透明背景？
【发布时间】：2020-08-26 08:56:06
【问题描述】：

当我滑动到新路线时，我得到一个带有旋转 CircularProgressIndicator 的白色背景。新路由有一个Future，它从HTTP Post 获取数据。相反，我希望原始页面的背景保持在微调器后面，直到未来完成并发生过渡。那么如何使微调器的背景透明而不是白色呢？这是未来的代码，我认为这是触发微调器的地方；

FutureBuilder<List<ReplyContent>> replyStage({String replyid, String replytitle}) {
  return new FutureBuilder<List<ReplyContent>>(
    future: downloadReplyJSON(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        List<ReplyContent> replycrafts = snapshot.data;
        return StageBuilderVR(replycrafts, replytitle);
      } else if (snapshot.hasError) {
        return Text('${snapshot.error}');
      }
      return CircularProgressIndicator();
    },
  );
}

这是滑动到未来的代码；

onSwipeUp: () {
Navigator.of(context).push(_createRoute());
}

还有PageRouteBuilder的代码：

Route _createRoute() {
  return PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation, secondaryAnimation) => ReplyHome(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

【问题讨论】：

标签： flutter dart spinner future opacity

【解决方案1】：

此功能以透明背景推送路由

onPressed: () {
                    Navigator.of(context).push(
                      PageRouteBuilder(
                        opaque: false,
                        pageBuilder: (_, __, ___) {
                          return MyTransperentRoute();
                        },
                      ),
                    );
                  }

所以在您的 CircularProgressIndicator 页面中，您可以更改根 Widget 的背景颜色，例如 color: Colors.transperent 或普通的 Container 没有任何颜色设置将达到您需要的效果


class MyTrnsperentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

查看 dartpad 上的工作代码here

【讨论】：

我应该为 "pageBuilder: (_, __, ___" 放什么？
按原样使用，它们是函数的参数，如果你ctrl点击它你会看到它们是什么
控制点击告诉我“在所有地方都找不到用法”。
看看你是怎么用的，你要导入
我尝试使用 Flutter.dev 中的示例添加您对“PageRouteBuilder( opaque: false”) 的建议，但在过渡期间背景仍然是纯白色。这可能来自进度条在未来。这是我在 flutter.dev 示例中使用的代码；flutter.dev/docs/cookbook/animation/page-route-animation

【解决方案2】：

您可以使用 showDialog 打开一个对话框，该对话框将使用 AlertDialog 打开一个透明背景，您可以返回自己的有状态小部件。而不是 streamBuilder，只需使用 future Builder。

试试下面的代码：

void uploadAndShowProgress() async {
    await showDialog(
      context: context,
      builder: (context) {
        return StreamBuilder(
          stream: uploadFile(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              StorageTaskEvent event = snapshot.data;
              final _snapshot = event.snapshot;
              _progress = _snapshot.bytesTransferred / _snapshot.totalByteCount;
            } else {
              //*  pop when there's no data or error...
              Navigator.pop(context);
            }

            if (snapshot.hasError) {
              SnackbarWidget.showSnackbar(
                  content: Text(snapshot.error.toString()), context: context);
            }

            return AlertDialogWidget(progress: _progress);
          },
        );
      },
    );
  }

【讨论】：

“context: context”中的“context”出现红色下划线错误。
我刚刚用调用未来的代码重新编辑了操作。

【解决方案3】：

Stack(
      children: <Widget>[
        Opacity(
          opacity: _isLoading ? 1.0 : 0, 
          child: CircularProgressIndicator(),
        ),
      ],
    );

【讨论】：

我用堆栈包裹了 circularprogressindicator，但 Android Studio 用红色下划线“_isLoading”。如何检查它是否正在加载？
你这样写；返回不透明度（不透明度：1.0，孩子：CircularProgressIndicator（），），
任何机会你都可以编辑你的答案以显示我应该写的地方；返回不透明度（不透明度：1.0，孩子：CircularProgressIndicator（），），？
这给了我一个透明的 CircularProgressIndicator()，而不是透明的背景。

【解决方案4】：

最后，我创建了一个虚拟页面，它以图形方式镜像上一页，其中包含上一页的所有图形元素，但没有任何代码。我用它代替了 CircularProgressIndicator。我不知道它是否理想，但它似乎运作良好。

FutureBuilder<List<ReplyContent>> replyStage({String replyid, String replytitle}) {
  return new FutureBuilder<List<ReplyContent>>(
    future: downloadReplyJSON(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        List<ReplyContent> replycrafts = snapshot.data;
        return StageBuilderVR(replycrafts, replytitle);
      } else if (snapshot.hasError) {
        return Text('${snapshot.error}');
      }
      return DummyPage();
    },
  );
}

【讨论】：