如何使用 FutureBuilder Flutter 覆盖和居中圆形进度指示器答案

【问题标题】：How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter如何使用 FutureBuilder Flutter 覆盖和居中圆形进度指示器
【发布时间】：2021-02-15 11:58:32
【问题描述】：

我有一个 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>[
              .
              .
              .
              .
              .
              
);
  }
}

【问题讨论】：

标签： flutter flutter-futurebuilder

【解决方案1】：

要将其居中，请使用 Center 小部件要将其覆盖在另一个小部件之上，请使用 Stack 小部件并将其放在您希望它在子列表中遍历的部分之后

编辑：要使覆盖小部件采用底层小部件的大小，请在覆盖小部件周围使用 Positioned.fill。

【讨论】：

【解决方案2】：

要使 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 来获取数据，因此您必须确保小部件可以在数据到达之前显示。

【讨论】：

【解决方案3】：

将您的 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 之外什么都没有。

【讨论】：