Question

我有一个异步功能。我正确使用它。看起来是这样的：

Future<void> getData() async
{
// get data from DB
}

有效。我从

调用它

void initState  ()
{
    super.initState();

    getData();
}

我想确保有一个进度指示器在运行，直到函数完成所执行的操作为止。

有人可以帮我吗？我不知道从哪里开始。

此函数的各个部分在完成每个命令所需的时间/速度上均得到完成，但是我需要等待整个getData（）函数完全完成后才能启动我的应用程序。我该怎么办？

Answer 1

在主屏幕之前具有状态控件
提取数据库完成后推送替换屏幕

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: LoadingScreen(),
      routes: {
        '/homePage': (context){
          return HomePage();
        },
      },
    );
  }
}


class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  Future<void> getData() async {
    // get data from DB
  }

  void navigationPage() async {
    await getData();
    Navigator.of(context).pushReplacementNamed('/homePage');

  }
  @override
  void initState() {
    super.initState();
    navigationPage();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

Answer 2

虽然 ejabu 的解决方案有效，但它远非完美并且在没有 await 的情况下调用异步函数，尤其是在 initState 是一个大 nono。

就像 Flutter 中的所有内容一样，如果您有问题，有一个小部件可以解决这个问题。
在 Future 完成后呈现页面的理想小部件是 FutureBuilder (docs)。
FutureBuilder 是一个死有用的小部件。您可以将它用于任何在构建之前必须完成 Future 的小部件。

例如，如果某个应用要求用户登录 Google，初始化一些 API，然后显示主页，那么您可以使用 FutureBuilder 来显示进度指示器当 Future 正在运行时，发生错误时的错误页面，或者如果一切正常并且 Future 完成没有错误的主页。

以下是小部件构建方法的一个简单示例：

Widget build() {
  return FutureBuilder(
    future: futureFunction(),
    builder: (context, snapshot) {
      // Future done with no errors
      if (snapshot.connectionState == ConnectionState.done &&
          !snapshot.hasError) {
        return HomePage();
      }

      // Future with some errors
      else if (snapshot.connectionState == ConnectionState.done &&
          snapshot.hasError) {
        return Text("The error ${snapshot.error} occured");

      // Future not done yet
      else {
        return Scaffold(
          body: Center(
            child: Container(
              width: MediaQuery.of(context).size.width / 1.5,
              height: MediaQuery.of(context).size.width / 1.5,
              child: CircularProgressIndicator(strokeWidth: 10),
            ),
          ),
        );
      }
    }
  )
}

我可以快速吐槽一下 Stack Overflow 中的编辑器有多糟糕吗？这导致我在完成之前不小心发布了我的问题:(

使用进度/活动指示器等待等待完成

2 个答案: