Flutter Futurebuilder 不显示 ListView

Question

我正在尝试循环浏览来自 OpenWeather API 的天气预报。 不呈现列表视图。仅呈现加载指示器。 “列表”是我要获取数据并在 ListView 中显示的数组。我认为模型映射有问题。谢谢你

{
  "list": [
    {
      "dt": 1566518400,
      "main": {
        "temp": 14.68,
        "temp_min": 14.25,
        "temp_max": 14.68,
        "pressure": 1029.5,
        "sea_level": 1029.5,
        "grnd_level": 1018.5,
        "humidity": 74,
        "temp_kf": 0.43
      },
      "weather": [
        {
          "id": 801,
          "main": "Clouds",
          "description": "few clouds",
          "icon": "02n"
        }
      ],
      "clouds": {
        "all": 16
      },
      "wind": {
        "speed": 2.42,
        "deg": 93.981
      },
      "sys": {
        "pod": "n"
      },
      "dt_txt": "2019-08-23 00:00:00"
    },

获取预测的函数

Future<List<Forcast>> _fetchUsers() async {
    http.Response response = await http.get(
        'http://api.openweathermap.org/data/2.5/forecast?q=warsaw&units=metric&appid=');

    if (response.statusCode == 200) {
      final data = json.decode(response.body);

      List<Forcast> list = data['list'].map<Forcast>((json) {
        return Forcast.fromJson(json);
      }).toList();

      return list;
    } else {
      throw Exception('Failed to load internet');
    }
  }

未来的建设者

child: SizedBox(
              height: 400.0,
              child: FutureBuilder<List>(
                future: _fetchUsers(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData)
                    return Center(child: CircularProgressIndicator());

                  return ListView(
                    children: snapshot.data
                        .map((user) => ListTile(
                              title: Text(user.dt),
                              subtitle: Text(user.temp),
                            ))
                        .toList(),
                  );
                },
              ),
            ),

Forcastt 模型

class Forcast {
  int id;
  String temp;

  Forcast({
    this.id,
    this.temp,
  });

  factory Forcast.fromJson(Map<String, dynamic> json) {
    print(json);
    return Forcast(
      id: json['dt'],
      temp: json['main'].temp,
    );
  }
}

Answer 1

您可以将完整的 json 字符串放入 https://app.quicktype.io/ 你会得到正确的模型

因为您发布的 json 字符串无效
所以我使用https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22的demo json中的json

bleow 是来自示例 json 的演示预测结构

// To parse this JSON data, do
//
//     final forcast = forcastFromJson(jsonString);

import 'dart:convert';

Forcast forcastFromJson(String str) => Forcast.fromJson(json.decode(str));

String forcastToJson(Forcast data) => json.encode(data.toJson());

class Forcast {
    String cod;
    double message;
    int cnt;
    List<ListElement> list;
    City city;

    Forcast({
        this.cod,
        this.message,
        this.cnt,
        this.list,
        this.city,
    });

    factory Forcast.fromJson(Map<String, dynamic> json) => new Forcast(
        cod: json["cod"],
        message: json["message"].toDouble(),
        cnt: json["cnt"],
        list: new List<ListElement>.from(json["list"].map((x) => ListElement.fromJson(x))),
        city: City.fromJson(json["city"]),
    );

    Map<String, dynamic> toJson() => {
        "cod": cod,
        "message": message,
        "cnt": cnt,
        "list": new List<dynamic>.from(list.map((x) => x.toJson())),
        "city": city.toJson(),
    };
}

class City {
    int id;
    String name;
    Coord coord;
    String country;

    City({
        this.id,
        this.name,
        this.coord,
        this.country,
    });

    factory City.fromJson(Map<String, dynamic> json) => new City(
        id: json["id"],
        name: json["name"],
        coord: Coord.fromJson(json["coord"]),
        country: json["country"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "coord": coord.toJson(),
        "country": country,
    };
}

class Coord {
    double lat;
    double lon;

    Coord({
        this.lat,
        this.lon,
    });

    factory Coord.fromJson(Map<String, dynamic> json) => new Coord(
        lat: json["lat"].toDouble(),
        lon: json["lon"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "lat": lat,
        "lon": lon,
    };
}

class ListElement {
    int dt;
    MainClass main;
    List<Weather> weather;
    Clouds clouds;
    Wind wind;
    Sys sys;
    DateTime dtTxt;
    Rain rain;
    Rain snow;

    ListElement({
        this.dt,
        this.main,
        this.weather,
        this.clouds,
        this.wind,
        this.sys,
        this.dtTxt,
        this.rain,
        this.snow,
    });

    factory ListElement.fromJson(Map<String, dynamic> json) => new ListElement(
        dt: json["dt"],
        main: MainClass.fromJson(json["main"]),
        weather: new List<Weather>.from(json["weather"].map((x) => Weather.fromJson(x))),
        clouds: Clouds.fromJson(json["clouds"]),
        wind: Wind.fromJson(json["wind"]),
        sys: Sys.fromJson(json["sys"]),
        dtTxt: DateTime.parse(json["dt_txt"]),
        rain: json["rain"] == null ? null : Rain.fromJson(json["rain"]),
        snow: json["snow"] == null ? null : Rain.fromJson(json["snow"]),
    );

    Map<String, dynamic> toJson() => {
        "dt": dt,
        "main": main.toJson(),
        "weather": new List<dynamic>.from(weather.map((x) => x.toJson())),
        "clouds": clouds.toJson(),
        "wind": wind.toJson(),
        "sys": sys.toJson(),
        "dt_txt": dtTxt.toIso8601String(),
        "rain": rain == null ? null : rain.toJson(),
        "snow": snow == null ? null : snow.toJson(),
    };
}

class Clouds {
    int all;

    Clouds({
        this.all,
    });

    factory Clouds.fromJson(Map<String, dynamic> json) => new Clouds(
        all: json["all"],
    );

    Map<String, dynamic> toJson() => {
        "all": all,
    };
}

class MainClass {
    double temp;
    double tempMin;
    double tempMax;
    double pressure;
    double seaLevel;
    double grndLevel;
    int humidity;
    double tempKf;

    MainClass({
        this.temp,
        this.tempMin,
        this.tempMax,
        this.pressure,
        this.seaLevel,
        this.grndLevel,
        this.humidity,
        this.tempKf,
    });

    factory MainClass.fromJson(Map<String, dynamic> json) => new MainClass(
        temp: json["temp"].toDouble(),
        tempMin: json["temp_min"].toDouble(),
        tempMax: json["temp_max"].toDouble(),
        pressure: json["pressure"].toDouble(),
        seaLevel: json["sea_level"].toDouble(),
        grndLevel: json["grnd_level"].toDouble(),
        humidity: json["humidity"],
        tempKf: json["temp_kf"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "temp": temp,
        "temp_min": tempMin,
        "temp_max": tempMax,
        "pressure": pressure,
        "sea_level": seaLevel,
        "grnd_level": grndLevel,
        "humidity": humidity,
        "temp_kf": tempKf,
    };
}

class Rain {
    double the3H;

    Rain({
        this.the3H,
    });

    factory Rain.fromJson(Map<String, dynamic> json) => new Rain(
        the3H: json["3h"] == null ? null : json["3h"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "3h": the3H == null ? null : the3H,
    };
}

class Sys {
    Pod pod;

    Sys({
        this.pod,
    });

    factory Sys.fromJson(Map<String, dynamic> json) => new Sys(
        pod: podValues.map[json["pod"]],
    );

    Map<String, dynamic> toJson() => {
        "pod": podValues.reverse[pod],
    };
}

enum Pod { D, N }

final podValues = new EnumValues({
    "d": Pod.D,
    "n": Pod.N
});

class Weather {
    int id;
    MainEnum main;
    Description description;
    String icon;

    Weather({
        this.id,
        this.main,
        this.description,
        this.icon,
    });

    factory Weather.fromJson(Map<String, dynamic> json) => new Weather(
        id: json["id"],
        main: mainEnumValues.map[json["main"]],
        description: descriptionValues.map[json["description"]],
        icon: json["icon"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "main": mainEnumValues.reverse[main],
        "description": descriptionValues.reverse[description],
        "icon": icon,
    };
}

enum Description { CLEAR_SKY, BROKEN_CLOUDS, LIGHT_RAIN, MODERATE_RAIN, FEW_CLOUDS }

final descriptionValues = new EnumValues({
    "broken clouds": Description.BROKEN_CLOUDS,
    "clear sky": Description.CLEAR_SKY,
    "few clouds": Description.FEW_CLOUDS,
    "light rain": Description.LIGHT_RAIN,
    "moderate rain": Description.MODERATE_RAIN
});

enum MainEnum { CLEAR, CLOUDS, RAIN }

final mainEnumValues = new EnumValues({
    "Clear": MainEnum.CLEAR,
    "Clouds": MainEnum.CLOUDS,
    "Rain": MainEnum.RAIN
});

class Wind {
    double speed;
    double deg;

    Wind({
        this.speed,
        this.deg,
    });

    factory Wind.fromJson(Map<String, dynamic> json) => new Wind(
        speed: json["speed"].toDouble(),
        deg: json["deg"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "speed": speed,
        "deg": deg,
    };
}

class EnumValues<T> {
    Map<String, T> map;
    Map<T, String> reverseMap;

    EnumValues(this.map);

    Map<T, String> get reverse {
        if (reverseMap == null) {
            reverseMap = map.map((k, v) => new MapEntry(v, k));
        }
        return reverseMap;
    }
}