如何解决从数组内的数组中解析数据并根据 FLUTTER 中的映射值条件创建新列表
[
{
"name": "School1","image": "url1","place": "place1","class": [
{
"class": "first","strength": "25","students": [
{
"id": "student1","dob": "mdd:mm:yyyy","age": 6,"fees": 0
},{
"id": "student2","fees": 1
}
]
},{
"class": "second","strength": 30,"fees": 1
}
]
}
]
},{
"name": "School2","image": "url2","place": "place2","fees": 1
}
]
}
]
}
]
参考上面的Json数据
如何在FlutteR/DART中满足特定条件后创建添加数据。在这里,我需要一些关于单个代码文件的帮助。请帮帮我。
- 将整个数据保存到列表中。
- 按特定学校的 id 和年龄向列表视图显示学生。
- 点击学生职位,在另一个屏幕上显示学校名称、班级、班级实力、年龄、职业等详细信息。
- 创建另外两个列表视图,根据已付费或未付费条件(数据中已付费=1,未付费=0)显示学生姓名和学校名称。
解决方法
您的问题需要回答很长时间...
我会试着给你一些提示。 首先,从你的 json 数据中创建相应的 dart 类。
我建议你看看:https://app.quicktype.io/ 它是一个“即时解析任何语言的json”,你可以把你的json代码解析成dart。
以下是我从您的 json 示例中生成的内容:
// To parse this JSON data,do
//
// final school = schoolFromMap(jsonString);
import 'dart:convert';
List<School> schoolFromMap(String str) => List<School>.from(json.decode(str).map((x) => School.fromMap(x)));
String schoolToMap(List<School> data) => json.encode(List<dynamic>.from(data.map((x) => x.toMap())));
class School {
School({
this.name,this.image,this.place,this.schoolClass,});
final String name;
final String image;
final String place;
final List<Class> schoolClass;
School copyWith({
String name,String image,String place,List<Class> schoolClass,}) =>
School(
name: name ?? this.name,image: image ?? this.image,place: place ?? this.place,schoolClass: schoolClass ?? this.schoolClass,);
factory School.fromMap(Map<String,dynamic> json) => School(
name: json["name"] == null ? null : json["name"],image: json["image"] == null ? null : json["image"],place: json["place"] == null ? null : json["place"],schoolClass: json["class"] == null ? null : List<Class>.from(json["class"].map((x) => Class.fromMap(x))),);
Map<String,dynamic> toMap() => {
"name": name == null ? null : name,"image": image == null ? null : image,"place": place == null ? null : place,"class": schoolClass == null ? null : List<dynamic>.from(schoolClass.map((x) => x.toMap())),};
}
class Class {
Class({
this.classClass,this.strength,this.students,});
final String classClass;
final dynamic strength;
final List<Student> students;
Class copyWith({
String classClass,dynamic strength,List<Student> students,}) =>
Class(
classClass: classClass ?? this.classClass,strength: strength ?? this.strength,students: students ?? this.students,);
factory Class.fromMap(Map<String,dynamic> json) => Class(
classClass: json["class"] == null ? null : json["class"],strength: json["strength"],students: json["students"] == null ? null : List<Student>.from(json["students"].map((x) => Student.fromMap(x))),dynamic> toMap() => {
"class": classClass == null ? null : classClass,"strength": strength,"students": students == null ? null : List<dynamic>.from(students.map((x) => x.toMap())),};
}
class Student {
Student({
this.id,this.dob,this.age,this.fees,});
final String id;
final String dob;
final int age;
final int fees;
Student copyWith({
String id,String dob,int age,int fees,}) =>
Student(
id: id ?? this.id,dob: dob ?? this.dob,age: age ?? this.age,fees: fees ?? this.fees,);
factory Student.fromMap(Map<String,dynamic> json) => Student(
id: json["id"] == null ? null : json["id"],dob: json["dob"] == null ? null : json["dob"],age: json["age"] == null ? null : json["age"],fees: json["fees"] == null ? null : json["fees"],dynamic> toMap() => {
"id": id == null ? null : id,"dob": dob == null ? null : dob,"age": age == null ? null : age,"fees": fees == null ? null : fees,};
}
好的,现在你有了模型类。 这应该回答您的第 1 点,您可以将欢迎列表保存到 json 中,反之亦然。
对于第 2. 点,您应该使用 ListView.build() ,例如使用学生列表( List items = .... ; ):
@override
Widget build(BuildContext context) {
assert(items != null);
accounts.sort((a,b) => a.id.compareTo(b.id));
return items.isNotEmpty
? ListView.builder(
padding: const EdgeInsets.all(8),itemCount: items.length,itemBuilder: (context,counter) => Card(
child: ListTile(
onTap: () { // Open a new page/popup to display the student widget....
},title: Text(item.id ?? ''),subtitle: Text(item.dob ?? ''),),)
: Container(
child: Text('No items'),);
}
}
这是您的构建方法,用于显示卡片列表,显示学生对象的简单标题。
使用 onTap() {...} 方法显示学生详细信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。