dart - 为什么 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，你需要将它插入到widget树中并返回一个widget到 builder。