如何在颤动中从异步函数安全地调用 setState 函数？

Question

我的 Flutter 应用程序中有一个下载按钮，在下载文件时会在按下按钮之前显示 Text("download") CircularProgressIndicator()，在下载文件时会显示 Text("Open")。

_FileStatus status = _FileStatus.EMPTY;

RaisedButton raisedButton() {
  var child;
  if (status == _FileStatus.EMPTY) {
    child = Text("download");
  } else if (status == _FileStatus.DOWNLOADING) {
    child = CircularProgressIndicator();
  } else {
    child = Text("Open");
  }
  return RaisedButton(
    child: child,
    onPressed: () {
      if (status == _FileStatus.EMPTY) {
        setState(() {
          status = _FileStatus.DOWNLOADING;
        });
        download().then((bool isDownloaded) {
          if (isDownloaded) {
            //setState status=>Downloaded
          } else {
            //setState status=>Empty
          }
        });
      } else {
        print("Open");
      }
    },
  );
}

Future<bool> download() async {
  var response = await Future<bool>.delayed(Duration(seconds: 5), () {
    print("Downloading ...");
    return true;
  });
  if (response) {
    print("Downloaded");
    return true;
  } else {
    print("Download Failed!");
    return false;
  }
}

但是这个按钮位于应用程序的第二页。因此，人们可能会按下下载按钮，然后返回第一页。通常，如果我按下下载按钮然后等待它完成，那么 setState 会将status 更新为DOWNLOADED；没问题。但是如果我按下download 按钮然后返回，那么download() 将在后台运行，当它完成时它会尝试运行我已经注释掉的setState 方法之一。这要么给出错误，要么说内存泄漏问题。

我已经尝试通过使用 isLoaded 变量来解决这个问题。

@override
void initState() {
  isLoaded = true;
  super.initState();
}
@override
void dispose() {
  isLoaded = false;
  super.dispose();
}

然后在调用 setState 方法之前检查 isLoaded 是否为真。

if (isLoaded) {
  setState(() {
    status = _FileStatus.DOWNLOADING;
  });
}

但这感觉像是一种 hacky 方法，我知道必须有更好的方法来解决这个问题。我搜索了其他类似的问题，但找不到我要找的东西。

Answer 1

只需添加一个条件来检查您的状态是否已挂载，如果不是 - 不要调用setState：

          download().then((bool isDownloaded) {
            // Checking if widget is mounted
            if (!mounted) {
              return;
            }

            ...