Flutter - 在长期运行的过程之前，更新UI的最佳方法是什么？

Question

我有一个长期运行的搜索过程，我试图显示一个用Visibility包装的CircularProgressIndicator。可见性属性是通过ViewModel标志设置的。

Visibility(
   visible: viewModel.inProgress,
   child:...
)

在我运行搜索（长期运行的过程）之前，我将inPrgress更新为true，并调用nofityListeners()，然后运行搜索。问题是UI从来没有被更新。

onSearch(){
    inProgress=true;
    notifyListeners();
    search();//takes a while t complete
    inProgress=false;
    notifyListeners();
}

如果我引入一点延迟，进度就会显示，但运行起来很不稳定。

Future.delayed(const Duration(milliseconds: 100),()=>_search())//a little delay to show progress
  .then((result) {
   .
   .
   .
});

想知道在Flutter应用中实现这个问题的最好方法是什么。

Answer 1

你需要通过在search()之前设置 await来等待search()函数的完成，当然还要让onSearch()成为async。就像下面这样。

onSearch() async {
    inProgress=true;
    notifyListeners();
    await search();//takes a while t complete
    inProgress=false;
    notifyListeners();
}