如何仅在上一个屏幕加载完成后导航到 Flutter 中的下一个屏幕？答案

【问题标题】：How to navigate to next screen in Flutter only when the previous screen has finished loading?如何仅在上一个屏幕加载完成后导航到 Flutter 中的下一个屏幕？
【发布时间】：2023-02-17 02:26:19
【问题描述】：

标题几乎解释了我想做什么。我有一个应用程序，其中 init 状态具有要调用的异步方法。构建中还有一些按钮，按下这些按钮会执行异步方法（api 调用）。

问题是，如果我在前一个屏幕完全加载之前导航到一个新屏幕，应用程序会显示模棱两可的行为，比如没有完全加载下一个屏幕或完全崩溃。

我的问题是，当您在完成执行之前导航到新屏幕时，上一个屏幕的异步方法会发生什么情况？
有没有办法在您导航到新屏幕时暂停/取消这些异步方法的执行，并在您返回该屏幕时恢复/重新加载？

或者

有没有办法只在前一个屏幕完全加载后导航到新屏幕。

【问题讨论】：

标签： android flutter dart async-await flutter-dependencies

【解决方案1】：

如果您使用 Navigator.push(...); 从屏幕 1 导航到屏幕 2，那么屏幕 1 状态加载应该完成加载您的 API 状态/数据，即使屏幕 2 正在显示。但是，如果您使用 Navigator.pushReplacement(...); 从屏幕 1 导航到屏幕 2，那么屏幕 1 状态的加载应该停止，因为在层次结构中您的屏幕已被屏幕 2 取代。

如果你只想在屏幕状态 1 完全加载时调用一个函数，你可以使用：

void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => myFunction());
}

【讨论】：

【解决方案2】：

如果您不等待就导航到下一个屏幕，它仍然会运行直到完成。所有普通的移动应用程序都有一个叫做加载小部件的东西。它在您开始调用异步方法时出现，并在它完成时消失。对我来说，我经常在任何屏幕上使用Stack，这样可以防止用户按手机上的任何内容。如果您想等待 util 移动到下一个屏幕，请使用 await。

【讨论】：

您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。