Flutter中如何将复杂JSON数据解析后以列表形式展示

以下是可直接运行的实现代码，供Flutter入门开发者参考：

用到的JSON结构示例 #

{
    "product": "astro",
    "init": "2021083118",
    "dataseries": [{
        "timepoint": 3,
        "cloudcover": 5,
        "seeing": 7,
        "transparency": 5,
        "lifted_index": -1,
        "rh2m": 12,
        "wind10m": {
            "direction": "NE",
            "speed": 2
        },
        "temp2m": 28,
        "prec_type": "none"
    },
    // 其余dataseries结构与上述示例一致
    ]
}

主类代码（main.dart） #

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '7Timer.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage()
  ));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  late String p;
  late String i;
  late List<Dataseries> d;

  Future<String> getData() async {
    var response = await http.get(
      Uri.parse("https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0"),
    );
    Map<String,dynamic> userMap = jsonDecode(response.body);
    var timer = Timer.fromJson(userMap);
    setState(() {
      p = timer.product;
      i = timer.init;
      d = timer.data;
    });
    return "Success!";
  }

  @override
  void initState(){
    getData();
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text("Listviews"), backgroundColor: Colors.blue),
      body: ListView.builder(
        itemCount: d == null ? 0 : d.length,
        itemBuilder: (BuildContext context, int index){
          return Card(
            child: Text('timepoint=${d[index].timepoint} seeing=${d[index].seeing} cloudcover=${d[index].cloudcover}'),
          );
        },
      ),
    );
  }
}

模型类代码（7Timer.dart） #

class Timer {
  final String product;
  final String init;
  final List<Dataseries> data;

  Timer({required this.product, required this.init, required this.data});

  factory Timer.fromJson(Map<String, dynamic> json) {
    var list = json['dataseries'] as List;
    List<Dataseries> dataList = list.map((i) => Dataseries.fromJson(i)).toList();
    return Timer(
      product:json['product'],
      init:json['init'],
      data:dataList,
    );
  }

  Map<String, dynamic> toJson() => {
    'product': product,
    'init': init,
  };
}

class Dataseries {
  int timepoint;
  int cloudcover;
  int seeing;
  int transparency;
  int lifted_index;
  int rh2m;

  Dataseries(this.timepoint, this.cloudcover,this.seeing,this.transparency,this.lifted_index,this.rh2m);

  Dataseries.fromJson(Map<String, dynamic> json)
      : timepoint = json['timepoint'],
        cloudcover = json['cloudcover'],
        seeing = json['seeing'],
        transparency = json['transparency'],
        lifted_index = json['lifted_index'],
        rh2m = json['rh2m'];

  Map<String, dynamic> toJson() => {
    'timepoint': timepoint,
    'cloudcover': cloudcover,
    'seeing' : seeing, 
    'transparency' : transparency,
    'lifted_index' : lifted_index,
    'rh2m' : rh2m
  };
}

内容的提问来源于stack exchange，提问作者Aditya Prasad