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

要居中，请使用“中心”小部件要将其覆盖在另一个窗口小部件上方，请使用堆栈窗口小部件，并将其放置在希望其在子级列表中经过的部分之后

编辑：使用覆盖的小部件周围的Positioned.fill使覆盖的小部件占据底层小部件的大小。

Answer 2

只需要将“ CircularProgressIndicator（）”居中，只需用“中心”小部件将其包装。

  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>[
              .
              .
              .
              .
              .
              
));

我不确定您所说的overlay是什么意思，因为在您的代码示例中，futurebuilder就是什么。

如何使用FutureBuilder Flutter叠加和居中循环进度指示器

3 个答案: