如何使用 FutureBuilder Flutter 叠加和居中循环进度指示器
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>[
.
.
.
.
.
);
}
}
要使其居中,请使用“居中”小部件
要将其覆盖在另一个小部件之上,请使用 Stack 小部件并将其放置在子列表中您希望它覆盖的部分之后
编辑:要使叠加小部件采用底层小部件的大小,请在叠加小部件周围使用 Positioned.fill。
要使 CircularProgressIndicator() 居中,只需用中心小部件将其包裹起来。
return Center(child: CircularProgressIndicator()) ;
pub.dev 上有可用的包,例如 modal_progress_hud ( https://pub.dev/packages/modal_progress_hud ) and 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 之外别无其他。
我有一个 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>[
.
.
.
.
.
);
}
}
要使其居中,请使用“居中”小部件 要将其覆盖在另一个小部件之上,请使用 Stack 小部件并将其放置在子列表中您希望它覆盖的部分之后
编辑:要使叠加小部件采用底层小部件的大小,请在叠加小部件周围使用 Positioned.fill。
要使 CircularProgressIndicator() 居中,只需用中心小部件将其包裹起来。
return Center(child: CircularProgressIndicator()) ;
pub.dev 上有可用的包,例如 modal_progress_hud ( https://pub.dev/packages/modal_progress_hud ) and 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 之外别无其他。