使用 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 在第一次加載時不渲染圖像
相關標簽