我试图从数据库接收数据（列表）并将数据保存为列表类型，并使用futurebuilder、listview在前端显示数据。但我猜代码无法将 json 从数据转换为列表格式。请帮忙。
这是 flutter 中的派对课程
import 'package:flutter_application_1/models/user.dart';
import 'package:json_annotation/json_annotation.dart';
class Party {
final String date_time;
final String destination;
final String departure;
final int max_recruitment;
final int cur_recruitment;
final String party_type;
final String party_recruiter_id;
final List<String> party_member_id;
final double departure_party_Lat;
final double departure_party_Lng;
final double destination_party_Lat;
final double destination_party_Lng;
const Party(
this.date_time,
this.destination,
this.departure,
this.max_recruitment,
this.cur_recruitment,
this.party_type,
this.party_recruiter_id,
this.party_member_id,
this.departure_party_Lat,
this.departure_party_Lng,
this.destination_party_Lat,
this.destination_party_Lng,
);
factory Party.fromJson(Map<String, dynamic> json) {
return Party(
json['date_time'] as String,
json['destination'] as String,
json['departure'] as String,
json['max_recruitment'] as int,
json['cur_recruitment'] as int,
json['party_type'] as String,
json['party_recruiter_id'] as String,
json['party_member_id'] as List<String>,
json['departure_party_Lat'] as double,
json['departure_party_Lng'] as double,
json['destination_party_Lat'] as double,
json['destination_party_Lng'] as double);
}
// static Party fromJson(json) => Party(
// date_time: json['date_time'],
// destination: json['destination'],
// departure: json['departure'],
// max_recruitment: json['max_recruitment'],
// cur_recruitment: json['cur_recruitment'],
// party_type: json['party_type'],
// party_recruiter_id: json['party_recruiter_id'],
// party_member_id: List<String>.from(json['party_member_id']),
// departure_party_Lat: json['departure_party_Lat'],
// departure_party_Lng: json['departure_party_Lng'],
// destination_party_Lat: json['destination_party_Lat'],
// destination_party_Lng: json['destination_party_Lng'],
// );
}
这是从数据库接收数据的方法：
Future getData() async {
var response = await http.get(
Uri.parse('http://10.0.2.2:8000/party/find'),
headers: <String, String>{
'Content-Type': 'application/x-www-form-urlencoded'
},
);
if (response.statusCode == 200) {
List<dynamic> jsonDataList = json.decode(response.body);
List<Party> parties =
jsonDataList.map((json) => Party.fromJson(json)).toList();
print(parties);
return response;
// List <Party> = parties = List<Party>.from(json.decode(response.body));
// Iterable l = json.decode(response.body);
// List<Party> posts = List<Party>.from(l.map((model)=> Party.fromJson(model)));
// List<Party> parties;
// parties = (json.decode(response.body) as List)
// .map((i) => parties.(i))
// .toList();
// print('success');
// final parsed =
// (jsonDecode(response.body) as List).cast<Map<String, dynamic>>();
// parsed.map<Party>((json) => Party.fromJson(json).toList());
// List jsonData = json.decode(response.body);
// print(jsonData[0]);
// print(jsonData.length);
// List<dynamic> jsonDataList = jsonDecode(response.body);
// print('success');
// print(jsonDataList.length);
// print(jsonDataList[1]);
// print("\n");
// print("\n");
// print(jsonDataList[1]);
// List<Party> parties = [];
// for (var u in jsonDataList) {
// Party party = Party(
// u['date_time'],
// u['destination'],
// u['departure'],
// u['max_recruitment'],
// u['cur_recruitment'],
// u['party_type'],
// u['party_recruiter_id'],
// u['party_member_id'],
// u['departure_party_Lat'],
// u['departure_party_Lng'],
// u['destination_party_Lat'],
// u['destination_party_Lng']);
// parties.add(party);
// }
// print(parties.length);
// return jsonDataList;
} else {
print("bad");
return;
}
}
并且将以下信息赋予response（上面代码中的变量），它是json类型：
[
{
"_id": "6512b53f7e4483304e0b63c2",
"date_time": "2024-05-17 00:00:00",
"destination": "",
"departure": "",
"max_recruitment": 4,
"cur_recruitment": 0,
"party_type": "carpool",
"party_recruiter_id": "65129c93ab78fa66247e2846",
"party_member_id": [
""
],
"party_Lat": 36.09891,
"party_Lng": 129.3833
},
{
"_id": "654f5ad41cbfe05e6a363c3c",
"date_time": "string",
"destination": "string",
"departure": "string",
"max_recruitment": 0,
"cur_recruitment": 0,
"party_type": "string",
"party_recruiter_id": "654f2e7e9cb296bce3858e89",
"party_member_id": [
"string"
],
"departure_party_Lat": 0,
"departure_party_Lng": 0,
"destination_party_Lat": 0,
"destination_party_Lng": 0
},
{
"_id": "654f7b10da51caca2ea6a6ac",
"date_time": "340924",
"destination": "string",
"departure": "string",
"max_recruitment": 0,
"cur_recruitment": 0,
"party_type": "string",
"party_recruiter_id": "65323a4812f3118027b4c791",
"party_member_id": [
"string"
],
"departure_party_Lat": 0,
"departure_party_Lng": 0,
"destination_party_Lat": 0,
"destination_party_Lng": 0
},
{
"_id": "654f7bb9bfa913acae51abcc",
"date_time": "string",
"destination": "string",
"departure": "string",
"max_recruitment": 0,
"cur_recruitment": 0,
"party_type": "string",
"party_recruiter_id": "kkh",
"party_member_id": [
"string"
],
"departure_party_Lat": 0,
"departure_party_Lng": 0,
"destination_party_Lat": 0,
"destination_party_Lng": 0
}
]
我正在尝试在将数据库中的数据排序到带有 Party 类的列表后创建 futurebuilder、listview：
FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if (snapshot.data == null) {
print(snapshot);
return CircularProgressIndicator();
} else {
return ListView.builder(
itemCount: snapshot.data!.legnth,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child:
card_partylist(
snapshot.data[index].date_time,
snapshot.data[index].party_type,
snapshot.data[index].dateTime,
snapshot.data[index].departure,
snapshot.data[index].destination,
'&snapshot.data[index].cur_recruitment/&snapshot.data[index].max_recruitment'),
);
});
}
}),
'''
card_play_list is:
'''
Widget card_partylist(String inputdate, String inputType, String inputTime,
String inputStart, String inputEnd, String inputStatus) {
int contextSpace = 1;
int contextFont = 3;
return Container(
height: 90,
decoration: BoxDecoration(
color: Colors.white,
border: Border(bottom: BorderSide(width: 1, color: Colors.black))),
child: Row(
children: [
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextFont,
child: Text(inputdate),
),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(flex: contextFont, child: Text(inputType)),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextFont,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: SizedBox(),
),
Expanded(flex: 2, child: Text(inputTime)),
Expanded(
flex: 2,
child: Text(inputStart),
)
],
)),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(flex: contextFont, child: Text(inputEnd)),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(
flex: contextSpace,
child: SizedBox(),
),
Expanded(flex: contextFont, child: Text(inputStatus)),
],
),
);
}
问题出在您的 getData() 函数中，您已将响应转换为 Party 模型类，并且没有返回 List，而是返回了响应。我建议进行以下更改并再次尝试。
Future<List<Party>> getData() async {
final response = await http.get(
Uri.parse('http://10.0.2.2:8000/party/find'),
headers: <String, String>{
'Content-Type': 'application/x-www-form-urlencoded'
},
);
if (response.statusCode == 200) {
List<dynamic> jsonDataList = json.decode(response.body);
List<Party> parties =
jsonDataList.map((json) => Party.fromJson(json)).toList();
print(parties);
return parties;
} else {
print("bad");
return <Party>[];
}
}
这将为您提供一个稍后可以使用的列表，我还建议您对 ListView 类进行以下更改。
FutureBuilder<List<Party>>(
future: getData(),
builder: (context, snapshot) {
if (snapshot.data == null) {
print(snapshot);
return CircularProgressIndicator();
} else {
return ListView.builder(
itemCount: snapshot.data?.length ?? 0,
itemBuilder: (BuildContext context, int index) {
final party = snapshot.data![index];
return Padding(
padding: const EdgeInsets.all(8.0),
child:
card_partylist(
party.date_time,
party.party_type,
party.dateTime,
party.departure,
party.destination,
'&snapshot.data[index].cur_recruitment/&snapshot.data[index].max_recruitment'),
);
});
}
}),
请告诉我这是否对您有效并解决了您的问题。