ListView中的颤振加载json总是返回空数据

Question

我试图建立一个简单的应用程序查看json数据。我从flutter网站上的例子开始:https://flutter.dev/docs/cookbook/networking/fetch-data

这是工作

现在我正在尝试加载评论列表:https://jsonplaceholder.typicode.com/comments/

当我运行应用程序时，我只看到从CircularProgressIndicator加载的圆圈。为什么?我无法获得数据，但我不明白为什么，你能帮我吗?下面是代码:

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter json test',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter json test'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<List<Comment>> _getComments() async {
var data = await http.get("https://jsonplaceholder.typicode.com/comments/");
List<Comment> comments = [];
if(data.statusCode==200) {
var jsonData = json.decode(data.body);
for (var d in jsonData) {
Comment comment = Comment(
d["postId"],d["id"], d["name"], d["email"], d["body"]);
comments.add(comment);
}
print(comments.length.toString());
return comments;
}
else {
throw Exception('Failed to load album');
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Container(
child: FutureBuilder(
future: _getComments(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasData){
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text( snapshot.data[index]['name']),
subtitle: Text(snapshot.data[index]['email']),
onTap: (){
Navigator.push(context,
new MaterialPageRoute(builder: (context) => DetailPage(snapshot.data[index]))
);
},
);
},
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
);
}
}
class DetailPage extends StatelessWidget {
final Comment comment;
DetailPage(this.comment);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(comment.name),
)
);
}
}

class Comment {
final int postId;
final String id;
final String name;
final String email;
final String body;
Comment(this.postId, this.id, this.name, this.email, this.body);
}

你能给我一些建议吗?谢谢你！

Answer 1

首先，您需要将JSON数据转换为Map<String, dynamic>，然后将其解析为List。通过查看code，您只将数据转换为列表，因此Type int is not a subtype of String error occurred。此外，您还没有在FutureBuilder中添加错误声明，因此您必须面对读取错误的困难，所以请检查我的答案

你需要从你的main.dart文件中调用这个CommentPage

class CommentPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _homePage();
}
}
class _homePage extends State<CommentPage> {
Future<List<CommentModel>> getPostData() async {
var url = "https://jsonplaceholder.typicode.com/comments";
final responce = await http.get(url);
final parsed = json.decode(responce.body).cast<Map<String, dynamic>>();
return parsed.map<CommentModel>((json) {
return CommentModel.fromJson(json);
}).toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
child: FutureBuilder<List<CommentModel>>(
future: getPostData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, int index) {
return ListTile(
title: Text(snapshot.data[index].name),
subtitle: Text(snapshot.data[index].email));
},
);
} else if (snapshot.hasError) {
return Center(
child: Text(snapshot.error.toString()),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
),
);
}
}

这是我的model类。我用这个在线工具创建了这个

class CommentModel {
CommentModel({
this.postId,
this.id,
this.name,
this.email,
this.body,
});
int postId;
int id;
String name;
String email;
String body;
factory CommentModel.fromJson(Map<String, dynamic> json) => CommentModel(
postId: json["postId"],
id: json["id"],
name: json["name"],
email: json["email"],
body: json["body"],
);
Map<String, dynamic> toJson() => {
"postId": postId,
"id": id,
"name": name,
"email": email,
"body": body,
};
}

Answer 2

您正在返回Comment实例而不是Map实例，因此您应该使用点访问器。我敢肯定，如果你检查你的控制台，你可能会看到这个错误。

ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text( snapshot.data[index].name), // Change here
subtitle: Text(snapshot.data[index].email), // Change here
onTap: () {
Navigator.push(context,
new MaterialPageRoute(builder: (context) => 
DetailPage(snapshot.data[index]))
);
},
);
}
)