[英]How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter
我有一个 FutureBuilder,它在获取数据时显示 CircularProgressIndicator。 目前,CircularProgressIndicator 显示在我屏幕的左上角,当它显示时,它后面的屏幕上没有其他东西。 我想让指示器居中,并在获取数据时将其作为我其他小部件前面的覆盖物。
class PriceScreen extends StatefulWidget {
@override
PriceScreenState createState() => PriceScreenState();
}
class PriceScreenState extends State<PriceScreen> {
Future<Map> futureData;
Future<Map> getData() async {
...
}
@override
void initState() {
super.initState();
futureData = getData();
}
@override
Widget build(BuildContext context) {
//get object of the provided class dataProvider
return Scaffold(
appBar: AppBar(
title: Text('My app'),
),
body: FutureBuilder<Object>(
future: futureData,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
.
.
.
.
.
);
}
}
要将其居中,请使用 Center 小部件 要将其覆盖在另一个小部件上方,请使用 Stack 小部件并将其放置在您希望它在子列表中经过的部分之后
编辑:要使覆盖小部件采用底层小部件的大小,请在覆盖小部件周围使用 Positioned.fill。
要使 CircularProgressIndicator() 居中,只需将其与 Center 小部件包装起来。
return Center(child: CircularProgressIndicator()) ;
pub.dev 上有可用的包,如 modal_progress_hud ( https://pub.dev/packages/modal_progress_hud ) 和 loading_overlay ( https://pub.dev/packages/loading_overlay ),您可以使用它们轻松显示模态进度指示器。 但是,您正在使用 FutureBuilder 来获取数据,因此您必须确保可以在数据到达之前显示小部件。
将您的 CircularProgressIndicator() 包裹在一个中心。 例子:
Center(child:CircularProgressIndicator());
你也可以像这样将整个东西包裹在一个中心:
body: Center(
child: FutureBuilder<Object>(
future: futureData,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
.
.
.
.
.
));
我不确定您所说的覆盖是什么意思,因为在您的代码示例中,除了 futurebuilder 之外别无他物。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.