时间戳

首页 > 解决方案 > 从 FutureBuilder 导航回页面

dart - 从 FutureBuilder 导航回页面

问题描述

我的应用程序有一个提交表单，其中有一些用户在表单中填写的数据。我需要在此过程中从外部 API 获取，并使用该数据在数据库中创建一个条目。一旦按下提交按钮，所有这一切都会发生，然后我希望能够回到我的主页路线。

我不确定如何在不使用 FutureBuilder 的情况下从 Future 函数获取数据，即使我不需要构建小部件，我只需要数据。

这是我目前拥有的：

_populateDB() {
    return new FutureBuilder(
      future: fetchPost(latitude, longitude),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _createJson(snapshot.data);
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => HomeScreen()
            ),
          );
        } else if (snapshot.hasError) {
          return new Text("${snapshot.error}");
        }
        return new CircularProgressIndicator();
      },
    );
}

当在屏幕上按下按钮时，将调用 _populateDB() 函数。我想做的是从 fetchPost(latitude, longitude) 获取数据，在函数 _createJson(snapshot.data) 中使用该数据，最后返回 HomeScreen()。

我还没有实现 _createJson(snapshot.data)，但是目前当我用 onPressed 调用这个方法时，它不会回到 HomeScreen()，我不知道为什么。

标签： dartflutterfuture

解决方案

您可以通过Future function异步方式或同步方式获取数据。

1 异步方式

很简单，你可以使用 dart 中的 Native Future API。该方法then是一个回调方法，在您的 Future 完成时调用。catchError如果您的未来因某些错误完成，您也可以使用方法。

fetchPost(latitude, longitude).then(  
      (fetchPostResultsData) {
           if (fetchPostResultsData != null)
               print (fetchPostResultsData);
      }  ).catchError(  
               (errorFromFetchPostResults){
                   print(errorFromFetchPostResults);
               } 
       );

使用这种方法，您的 UI 不会被阻止等待来自网络的结果。

2 同步方式

您可以使用 Dart 关键字async并使await您的调用保持同步。在您的情况下，您必须将_populateDB方法转换为async方法和结果await。fetchPost

_populateDB() async {
    var data = await fetchPost(latitude, longitude);
    // just execute next lines after fetchPost returns something.
    if (data !=null ){
        _createJson(snapshot.data);
        //... do your things
    } 
     else {
         //... your handle way
      }
 }

使用这种方法，您的_populateDB函数将等待fetchPost阻塞 UI Isolete 的结果，并在获得结果后立即执行下一条指令。

关于导航如果您的 HomeScreen 是堆栈上的前一个小部件，您只需要Navigator.pop(context)调用，但如果您的 HomeScreen 上方的堆栈中还有其他小部件，则使用Navigator.pushReplacement调用是更好的选择。

本文详细说明了Navigator方法的效果。我希望它有所帮助。

推荐阅读