如何解决Flutter / Dart-加载未来时对CircularProgressIndicator具有透明背景?
此刻,当我滑动到新路线时,背景变成白色,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,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,);
},);
}
解决方法
您可以使用showDialog打开一个对话框,该对话框将使用AlertDialog打开透明背景,您可以返回自己的有状态窗口小部件。代替streamBuilder只是使用将来的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);
},);
},);
}
,
Stack(
children: <Widget>[
Opacity(
opacity: _isLoading ? 1.0 : 0,child: CircularProgressIndicator(),),],);
,
此功能可推送具有透明背景的路线
onPressed: () {
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,pageBuilder: (_,__,___) {
return MyTransperentRoute();
},);
}
因此,在CircularProgressIndicator页面中,您可以更改根窗口小部件的背景颜色,例如color: Colors.transperent
或纯色Container
,而无需设置任何颜色即可实现所需的效果
class MyTrnsperentPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: const Center(
child: CircularProgressIndicator(),);
}
}
在dartpad here上查看工作代码
,最后,我创建了一个虚拟页面,该页面以图形方式镜像了前一页,其中包含前一页的所有图形元素,而没有任何代码。我用它代替了CircularProgressIndicator。我不知道它是否理想,但似乎效果很好。
FutureBuilder<List<ReplyContent>> replyStage({String replyid,String replytitle}) {
return new FutureBuilder<List<ReplyContent>>(
future: downloadReplyJSON(),snapshot) {
if (snapshot.hasData) {
List<ReplyContent> replycrafts = snapshot.data;
return StageBuilderVR(replycrafts,replytitle);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return DummyPage();
},);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。