flutter 从FutureBuilder导航回页面

x7yiwoj4 于 2023-01-06 发布在 Flutter

关注(0)|答案(2)|浏览(168)

我的应用有一个提交表单，用户在表单中填写了一些数据。在这个过程中，我需要从外部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（），我不知道为什么。

flutter

来源：https://stackoverflow.com/questions/55815246/navigating-back-to-page-from-futurebuilder

2条答案

按热度按时间

oiopk7p51#

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

1异步方式

很简单，你可以使用dart的Native Future API。方法then是一个回调方法，在Future完成时调用。如果Future完成时出现错误，你也可以使用catchError方法。

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

通过这种方法，您的UI不会因等待来自网络的结果而受阻。

2同步方式

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

_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，并在获得结果后立即执行下一条指令。
关于导航如果您的主屏幕是堆栈上的前一个小部件，您只需要Navigator.pop(context)调用，但如果您的主屏幕上方的堆栈中有其他小部件，则使用Navigator.pushReplacement调用是更好的选择。
This的文章用插图详细展示了Navigator方法的效果，希望能有所帮助。