json - Flutter:复杂的 json 序列化。解析 json 字符串以提供给 UI

Question

这是我通过http请求得到的json字符串。目的是根据当前工作日显示主题。

{
    "first_name": "First Name",
    "batch_name": "Batch 1",
    "enrolled_subjects": [
        "Subject 4",
        "Subject 5"
    ],
    "batch_timetable": {
        "Mon": {
            "Subject 4": [
                "6:00 PM - 7:00 PM"
            ],
            "Subject 5": [
                "5:00 PM - 6:00 PM",
                "7:00 PM - 8:00 PM"
            ],
            "Subject 6": [
                "8:00 PM - 9:00 PM"
            ]
        },
        "Tue": {
            "Subject 4": [
                "6:00 PM - 7:00 PM"
            ],
            "Subject 5": [
                "7:00 PM - 8:00 PM"
            ],
            "Subject 6": [
                "8:00 PM - 9:00 PM"
            ]
        }, ...so on upto "Sun"
    }
}

如何为这个 json 字符串设置模型类？

我试过这个模型类，但它给出了这个错误:type '_InternalLinkedHashMap<dynamic, dynamic>' is not a subtype of type 'Map<String, List<dynamic>>'

我也尝试过使用 quicktype 的模型类，但我认为这在这种情况下行不通。

class HomePageModel {
  HomePageModel({
    this.firstName,
    this.batchName,
    this.subjects,
    this.timetable,
  });

  String firstName;
  String batchName;
  List<String> subjects;
  Map timetable;

  factory HomePageModel.fromJson(Map<String, dynamic> json) => HomePageModel(
        firstName: json["first_name"],
        batchName: json["batch_name"],
        subjects: List<String>.from(json["subjects"].map((x) => x)),
        timetable: Map.from(json["timetable"])
            .map((key, value) => MapEntry(key, value)),
      );

  Map<String, dynamic> toJson() => {
        "first_name": firstName,
        "batch_name": batchName,
        "subjects": List<dynamic>.from(subjects.map((x) => x)),
        "timetable":
            Map.from(timetable.map((key, value) => MapEntry(key, value))),
      };
}

我正在使用 FutureBuilder 将此数据显示到 UI 中。任何帮助将不胜感激。

Answer 1

与您提供的 json 相比，我已经为您创建了 ListView 格式的示例，只需检查一下即可。

以下是您提供的json:

{
    "first_name": "First Name",
    "batch_name": "Batch 1",
    "enrolled_subjects": [
        "Subject 4",
        "Subject 5"
    ],
    "batch_timetable": {
        "Mon": {
            "Subject 4": [
                "6:00 PM - 7:00 PM"
            ],
            "Subject 5": [
                "5:00 PM - 6:00 PM",
                "7:00 PM - 8:00 PM"
            ],
            "Subject 6": [
                "8:00 PM - 9:00 PM"
            ]
        },
        "Tue": {
            "Subject 4": [
                "6:00 PM - 7:00 PM"
            ],
            "Subject 5": [
                "7:00 PM - 8:00 PM"
            ],
            "Subject 6": [
                "8:00 PM - 9:00 PM"
            ]
        }
    }
}

基于json我创建了一个ui

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = false;
  List<Timings> timingsList = List();

  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  @override
  void initState() {
    super.initState();
    dataLoadFunction();
  }

  dataLoadFunction() async {
    setState(() {
      _isLoading = true;
    });
    String jsonString = await loadFromAssets();
    Map newStringMap = json.decode(jsonString);
    //print(newStringMap['batch_timetable']);

    newStringMap['batch_timetable'].forEach((key, value) {
      List<Subjects> subjectsList = List();

      print(key);

      // print(value);
      value.forEach((key, value) {
        print(key);
        print(value);
        List<dynamic> timingValue = List();
        timingValue.add(value);
        Subjects subjects = Subjects(subjectName: key, timings: timingValue);
        subjectsList.add(subjects);
      });

      Timings sampleObject = Timings(
        day: key,
        subjectList: subjectsList,
      );
      timingsList.add(sampleObject);
    });
    print(timingsList.length);


    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _isLoading
            ? CircularProgressIndicator()
            : ListView.builder(
                itemCount: timingsList.length,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top:10,left:15),
                          child: Row(
                            children: <Widget>[
                              Text('Day :'),
                              Text(timingsList[index].day),
                            ],
                          ),
                        ),
                        Divider(color: Colors.grey,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(' Day wise Subjects are :'),
                            ListView.builder(
                              itemCount: timingsList[index].subjectList.length,
                              shrinkWrap: true,
                              itemBuilder: (BuildContext context, int i) {
                                return Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(timingsList[index]
                                        .subjectList[i]
                                        .subjectName),
                                    for (int j = 0;
                                        j <
                                            timingsList[index]
                                                .subjectList[i]
                                                .timings
                                                .length;
                                        j++)
                                      Text(timingsList[index]
                                          .subjectList[i]
                                          .timings[j]
                                          .toString()),
                                  ],
                                );
                              },
                            )
                          ],
                        )
                      ],
                    ),
                  );
                },
              ),
      ),
    );
  }
}

class Timings {
  final String day;
  final List<Subjects> subjectList;

  Timings({
    this.day,
    this.subjectList,
  });
}

class Subjects {
  final String subjectName;
  final List<dynamic> timings;

  Subjects({this.subjectName, this.timings});
}

我刚刚添加了数据，你可以根据你想要的ui来装饰它:

这段代码我实现了什么

1) 数据将被动态获取，因此即使 json 发生变化，它也会相应地进行调整。

2) 以 ListView 的形式添加，你可以随意。

提供了我制作的示例ui

让我知道它是否有效。