为什么 FutureBuilder 在 Flutter 中没有被调用？

Question

我的屏幕上有一个按钮，每当我点击它时我都会打电话给_fetchPost()。此方法调用fetchPost()。当我在var post = ... 行上设置断点时，我能够看到我解析的对象。但是，我的问题是 builder 不会被调用。

我是 Flutter 的新手，所以我的代码有问题吗？

void _fetchPost() {
    FutureBuilder<Post>(
      future: fetchPost(),
      builder: (BuildContext context, AsyncSnapshot<Post> snapshot) {
        if (snapshot.hasData) {
          String res = snapshot.data.parm1.toString() + snapshot.data.op + snapshot.data.parm2.toString();
          setState(() {
            _result = res;
          });
        } else if (snapshot.hasError) {
          setState(() {
            _result = snapshot.error;
          });
        }

        // By default, show a loading spinner
        return CircularProgressIndicator();
      },
    );
  }

  Future<Post> fetchPost() async {
    final response = await http.get('http://test.ethorstat.com/test.ashx');
    if (response.statusCode == 200) {
      // If server returns an OK response, parse the JSON
      var post = Post.fromJason(json.decode(response.body));
      return post;
    } else {
      // If that response was not OK, throw an error.
      throw Exception('Failed to load post!');
    }
  }

Answer 1

FutureBuilder 是一个小部件。这意味着为了让它工作，你需要先将它插入到小部件树中。

您可以将FutureBuilder 添加到小部件树中，方法是将其作为子级返回到另一个小部件，或者直接返回到小部件的build 函数：

class FetchWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) => FutureBuilder<Post>(
    future: fetchPost(),
    builder: (BuildContext context, AsyncSnapshot<Post> snapshot) {
      if (snapshot.hasData) {
        String res = snapshot.data.parm1.toString() + snapshot.data.op + snapshot.data.parm2.toString();
        setState(() { // setState will not work here, I only used this StatelessWidget to show what I mean with inserting it into the build tree
          _result = res;
        });
      } else if (snapshot.hasError) {
        setState(() {
          _result = snapshot.error;
        });
      }

      // By default, show a loading spinner
      return CircularProgressIndicator();
    },
  );

  Future<Post> fetchPost() async {
    final response = await http.get('http://test.ethorstat.com/test.ashx');
    if (response.statusCode == 200) {
      // If server returns an OK response, parse the JSON
     var post = Post.fromJason(json.decode(response.body));
     return post;
    } else {
      // If that response was not OK, throw an error.
     throw Exception('Failed to load post!');
    }
  }
}

这不会编译，因为我只是将您的代码复制到了一个StatelessWidget，它没有setState。我只想通过说 “将 [...] 添加到小部件树”来说明我的意思。

或者你可以使用普通的async await 来做你想做的事情：

void _fetchPost() async {
  final Post fetchedPost = await fetchPost();
  final String res = fetchedPost.parm1.toString() + fetchedPost.op + fetchedPost.parm2.toString();
  setState(() {
    _result = res;
  });
}

我不确定你想如何实现你的fetchPost，但是如果你想使用FutureBuilder，你需要将它插入到小部件树中，并将一个小部件返回给builder。