使用 ListView.builder 发出渲染数据
[英]Issue Rendering Data using ListView.builder
问题描述
这个想法是通过以下两种方式从下面的 JSON 渲染数据：
预期的输出是
显示所有，即所有的序列号和名称属性，如
0001 Mr.A 0002 Mr.B 0003 Mr.C 0004 Mr.D 等等
仅显示申诉
properties0001 Mr.A 0002 Mr.B 0005 Mr.E 0006 Mr.F 0009 Mr.I 0010 Mr.J 0013 Mr.M 0014 Mr.N
这是 JSON（响应）数据：
[
{
"district": "Kolkata",
"ward_no": [
{
"ward": "6",
"grievance": [
{
"serial_number": "0001",
"name" : "Mr.A"
},
{
"serial_number": "0002",
"name" : "Mr.B"
}
],
"general": [
{
"serial_number": "0003",
"name" : "Mr.C"
},
{
"serial_number": "0004",
"name" : "Mr.D"
}
]
},
{
"ward": "7",
"grievance": [
{
"serial_number": "0005",
"name" : "Mr.E"
},
{
"serial_number": "0006",
"name" : "Mr.F"
}
],
"general": [
{
"serial_number": "0007",
"name" : "Mr.G"
},
{
"serial_number": "0008",
"name" : "Mr.H"
}
]
}
]
},
{
"district": "Hooghly",
"ward_no": [
{
"ward": "8",
"grievance": [
{
"serial_number": "0009",
"name" : "Mr.I"
},
{
"serial_number": "0010",
"name" : "Mr.J"
}
],
"general": [
{
"serial_number": "0011",
"name" : "Mr.K"
},
{
"serial_number": "0012",
"name" : "Mr.L"
}
]
},
{
"ward": "9",
"grievance": [
{
"serial_number": "0013",
"name" : "Mr.M"
},
{
"serial_number": "0014",
"name" : "Mr.N"
}
],
"general": [
{
"serial_number": "0015",
"name" : "Mr.O"
},
{
"serial_number": "0018",
"name" : "Bruno Fernandes"
}
]
}
]
}
]
这是通过 GET API 调用收到的响应的 model class ：
import 'dart:convert';
List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
String? id;
String? district;
List<WardNo>? wardNo;
User({this.id, this.district, this.wardNo});
User.fromJson(Map<String, dynamic> json) {
this.id = json["_id"];
this.district = json["district"];
this.wardNo = json["ward_no"]==null ? null : (json["ward_no"] as List).map((e)=>WardNo.fromJson(e)).toList();
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["_id"] = this.id;
data["district"] = this.district;
if(this.wardNo != null)
data["ward_no"] = this.wardNo?.map((e)=>e.toJson()).toList();
return data;
}
}
class WardNo {
String? ward;
List<Grievance>? grievance;
List<General>? general;
WardNo({this.ward, this.grievance, this.general, this.urgent, this.services});
WardNo.fromJson(Map<String, dynamic> json) {
this.ward = json["ward"];
this.grievance = json["grievance"]==null ? null : (json["grievance"] as List).map((e)=>Grievance.fromJson(e)).toList();
this.general = json["general"]==null ? null : (json["general"] as List).map((e)=>General.fromJson(e)).toList();
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["ward"] = this.ward;
if(this.grievance != null)
data["grievance"] = this.grievance?.map((e)=>e.toJson()).toList();
if(this.general != null)
data["general"] = this.general?.map((e)=>e.toJson()).toList();
return data;
}
}
class General {
String? serialNumber;
String? name;
General({this.serialNumber, this.name});
General.fromJson(Map<String, dynamic> json) {
this.serialNumber = json["serial_number"];
this.name = json["name"];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["serial_number"] = this.serialNumber;
data["name"] = this.name;
return data;
}
}
class Grievance {
String? serialNumber;
String? name;
Grievance({this.serialNumber, this.name});
Grievance.fromJson(Map<String, dynamic> json) {
this.serialNumber = json["serial_number"];
this.name = json["name"];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["serial_number"] = this.serialNumber;
data["name"] = this.name;
return data;
}
}
调用 API 的 class：
class ModelClass with ChangeNotifier {
List<dynamic> _data = [];
List<dynamic> get data {
return [..._data];
}
Future<void> getData() async {
final url = Uri.http('192.168.0.6:3007', '/fetchData');
final response = await http.get(url);
print(response);
final List<User> users = userFromJson(response.body);
print(users);
_data = users;
print(_data);
}
}
我希望在其中显示数据的小部件 class ：
class MainScreen extends StatefulWidget {
MainScreenState createState() => MainScreenState();
}
class MainScreenState extends State<MainScreen> {
var clicked = false;
@override
void initState() {
Provider.of<ModelClass>(context, listen: false).getData();
super.initState();
}
void clickedButton() async {
await Provider.of<ModelClass>(context, listen: false).getData();
print('clicked');
setState(() {
clicked = !clicked;
});
}
@override
Widget build(BuildContext context) {
final provider = Provider.of<ModelClass>(context).data;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Demo App"),
),
body: !clicked
? Center(
child: ElevatedButton(
child: Text('Click Me'), onPressed: clickedButton))
: ListView.builder(
itemBuilder: (context, index) =>
Row(
children: [
Text(provider[0].wardNo[0].grievance[index].serialNumber), //*
SizedBox(width: 10),
Text(provider[0].wardNo[0].grievance[index].name) //*
],
),
itemCount: provider[0].wardNo[0].grievance.length,
));
}
}
现在，上面小部件中标记的行呈现以下 output：0001 Mr.A 0002 Mr.BI 想知道我需要做什么才能通过 JSON 以一种完全按照我所说的方式呈现数据的方式呈现以上。
1 个解决方案
解决方案1
0 2022-01-12 17:07:31
我已经修改了您所说的代码： MainScreen 中的 boolean 字段showGrievanceOnly用于表示我们是否只想显示申诉数据。 这是用户 class：
import 'dart:convert';
List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
String? id;
String? district;
List<WardNo>? wardNo;
User({this.id, this.district, this.wardNo});
User.fromJson(Map<String, dynamic> json) {
this.id = json["_id"];
this.district = json["district"];
this.wardNo = json["ward_no"]==null ? null : (json["ward_no"] as List).map((e)=>WardNo.fromJson(e)).toList();
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["_id"] = this.id;
data["district"] = this.district;
if(this.wardNo != null)
data["ward_no"] = this.wardNo?.map((e)=>e.toJson()).toList();
return data;
}
}
class WardNo {
String? ward;
List<Grievance>? grievance;
List<General>? general;
WardNo({this.ward, this.grievance, this.general});
WardNo.fromJson(Map<String, dynamic> json) {
this.ward = json["ward"];
this.grievance = json["grievance"]==null ? null : (json["grievance"] as List).map((e)=>Grievance.fromJson(e)).toList();
this.general = json["general"]==null ? null : (json["general"] as List).map((e)=>General.fromJson(e)).toList();
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["ward"] = this.ward;
if(this.grievance != null)
data["grievance"] = this.grievance?.map((e)=>e.toJson()).toList();
if(this.general != null)
data["general"] = this.general?.map((e)=>e.toJson()).toList();
return data;
}
}
class General {
String? serialNumber;
String? name;
General({this.serialNumber, this.name});
General.fromJson(Map<String, dynamic> json) {
this.serialNumber = json["serial_number"];
this.name = json["name"];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["serial_number"] = this.serialNumber;
data["name"] = this.name;
return data;
}
}
class Grievance {
String? serialNumber;
String? name;
Grievance({this.serialNumber, this.name});
Grievance.fromJson(Map<String, dynamic> json) {
this.serialNumber = json["serial_number"];
this.name = json["name"];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data["serial_number"] = this.serialNumber;
data["name"] = this.name;
return data;
}
}
这是模型类：
class ModelClass with ChangeNotifier {
List<User> _data = [];
List<User> get data {
return _data;
}
Future<void> getData() async {
final url = Uri.http('192.168.0.6:3007', '/fetchData');
final response = await http.get(url);
print(response);
final List<User> users = userFromJson(response.body);
print(users);
_data = users;
print(_data);
}
}
这是小部件 MainScreen：
class MainScreen extends StatefulWidget {
MainScreenState createState() => MainScreenState();
}
class MainScreenState extends State<MainScreen> {
var clicked = false;
@override
void initState() {
Provider.of<ModelClass>(context, listen: false).getData();
super.initState();
}
void clickedButton() async {
await Provider.of<ModelClass>(context, listen: false).getData();
print('clicked');
setState(() {
clicked = !clicked;
});
}
///this field is used to decide if we want to show grievance data only or not
bool showGrievanceOnly = false;
@override
Widget build(BuildContext context) {
final List<User> usersList = Provider.of<ModelClass>(context).data;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Demo App"),
),
body: !clicked
? Center(
child: ElevatedButton(
child: Text('Click Me'), onPressed: clickedButton))
:
// ListView.builder(
// itemBuilder: (context, index) =>
// Row(
// children: [
// Text(usersList[0].wardNo![0].grievance![index].serialNumber!), //*
// SizedBox(width: 10),
// Text(usersList[0].wardNo![0].grievance![index].name!) //*
// ],
// ),
// itemCount: usersList[0].wardNo![0].grievance!.length,
//
// )
ListView.builder(
itemBuilder: (context, index) => Column(
children: [
if (usersList[index].wardNo != null) ...[
for (WardNo ward in usersList[index].wardNo!) ...[
if (ward.grievance != null) ...[
for (Grievance grievance in ward.grievance!) ...[
Row(
children: [
Text(grievance.serialNumber ?? ''), //*
SizedBox(width: 10),
Text(grievance.name ?? ''), //*
],
),
],
],
if (!showGrievanceOnly && ward.general != null) ...[
for (General general in ward.general!) ...[
Row(
children: [
Text(general.serialNumber ?? ''), //*
SizedBox(width: 10),
Text(general.name ?? ''), //*
],
),
],
],
]
]
],
),
itemCount: usersList.length,
),
);
}
}
使用listView.builder时出现noSuchMethodError elementAt
[英]noSuchMethodError elementAt while using listView.builder
（扑）使用FutureBuilder的ListView.builder无法正常工作
[英](Flutter) ListView.builder using FutureBuilder not working
SliverList SliverChildBuilderDelegate 中的 ListView.builder 在第一次加载时不渲染图像
[英]ListView.builder inside SliverList SliverChildBuilderDelegate not rendering Images on first load
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter - ListView.builder 的渲染问题
Flutter 使用 ListView.builder
Flutter 问题：ListView.Builder 中的 DropDown
ListView.builder 不显示 JSON 响应数据
Flutter：ListView.builder 不显示数据
Flutter：将 Listview.builder 用于 ImagePicker
Flutter 将 Listview.builder 与提供程序一起使用
使用listView.builder时出现noSuchMethodError elementAt
（扑）使用FutureBuilder的ListView.builder无法正常工作
SliverList SliverChildBuilderDelegate 中的 ListView.builder 在第一次加载时不渲染图像
相关标签