什么是FutureBuilder与Http请求

这个builder函数接受两个参数BuildContext context与 AsyncSnapshot<T> snapshot，它返回一个widget。AsyncSnapshot包含异步计算的信息，它具有以下属性：

connectionState - 枚举ConnectionState的值，表示与异步计算的连接状态，ConnectionState有四个值：none，waiting，active和done;

data - 异步计算接收的最新数据；

error - 异步计算接收的最新错误对象；

AsyncSnapshot还具有hasData和hasError属性，以分别检查它是否包含非空数据值或错误值。

现在我们可以看到使用FutureBuilder的基本模式。在创建新的FutureBuilder对象时，我们将Future对象作为要处理的异步计算传递。 在构建器函数中，我们检查connectionState的值，并使用AsyncSnapshot中的数据或错误返回不同的窗口小部件。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
 class HttpDemo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('http请求'),
       ),
       body: HttpDemoHome(),
     );
   }
 }

 class HttpDemoHome extends StatefulWidget {
   @override
   _HttpDemoHomeState createState() => _HttpDemoHomeState();
 }

 class _HttpDemoHomeState extends State<HttpDemoHome> {
   @override
  void initState() {
    // TODO: implement initState
    super.initState();


  }
  Future<List> getData()async {
     var result=await http.get('https://resources.ninghao.net/demo/posts.json');
      final responseBody=json.decode(result.body);

    if(result.statusCode==200){
      //获取返回数据的列表
      final bodyList=responseBody['posts'] as List;
      //现在我们需要将 List<dynamic> 转换到一个 List<Posts> 类型的数组中：
      final datas=bodyList.map<Posts>((value)=>Posts.fromJson(value)).toList();
      return datas;
    }else{
      throw Exception('请求出错');
    }

  }
   @override
   Widget build(BuildContext context) {
     return FutureBuilder(
       future:getData() ,
       // ignore: missing_return
       builder: (BuildContext context,res){

         if(res.connectionState==ConnectionState.waiting){
           return Center(
             child: Icon(
               Icons.check_circle,
               color: Colors.green,
               size: 36,
             )
           );
         }else{
           return ListView(
             children:res.data.map<Widget>((item){
               print(item.title);
               return ListTile(
                 title: Text(item.title),
                 subtitle: Text(item.author),
                 leading: CircleAvatar(
                   backgroundImage: NetworkImage(item.imageUrl),
                 ),

               );
             }).toList(),
           );
         }
       },
     );
   }
 }

//定义数据类型

 class Posts{
   final int id;
   final String title;
   final String author;
   final String imageUrl;
   final String description;
   Posts({this.id,this.title,this.author,this.imageUrl,this.description});

   factory   Posts.fromJson(Map json){
     return Posts(id:json['id'],title:json['title'],author:json['author'],imageUrl:json['imageUrl'],description:json['description']);
   }


 }