如何使用 FutureBuilder Flutter 疊加和居中圓形進度指示器

Question

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

Answer 1

要將其居中，請使用 Center 小部件 要將其覆蓋在另一個小部件上方，請使用 Stack 小部件並將其放置在您希望它在子列表中經過的部分之后

編輯：要使覆蓋小部件采用底層小部件的大小，請在覆蓋小部件周圍使用 Positioned.fill。

Answer 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 來獲取數據，因此您必須確保可以在數據到達之前顯示小部件。

Answer 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 之外別無他物。