[英]Flutter: how to display data from a parsed json object containing a list of objects
从assets文件夹中解析出一个本地的JSON object后,我无法在屏幕上显示内容,我已经用了两天了,请记住我是编程新手和Z5ACEBC4CB70DDBB074B0AC76A刚开发出来的Z5ACEBC4CB70DDBB074B0AC76A一个udemy课程,这是我的第一个项目。 我很感激我能得到的任何帮助。
我的 JSON 文件
{
"movies": [
{
"name": "JOKER",
"actors": [
{
"name1": "Joaquin Phoenix"
},
{
"name2": "Robert De Niro"
},
{
"name3": "Zazie Beetz"
}
],
"category": [
{
"genre1": "Crime"
},
{
"genre2": "Drama"
},
{
"genre3": "Thriller"
}
],
"timeM": "121",
"text": "A gritty character study of Arthur Fleck, a man disregarded by society.",
"image": "image url",
***there are 4 more similar objects within the movies list***
},
我的 JSON model class
import 'dart:convert';
MovieList movieListFromJson(String str) => MovieList.fromJson(json.decode(str));
class MovieList {
List<Movie> movies;
MovieList({ this.movies,});
factory MovieList.fromJson(Map<String, dynamic> json) => MovieList(
movies: List<Movie>.from(json["movies"].map((x) => Movie.fromJson(x))),
);
}
class Movie {
String name;
List<Actor> actors;
List<Category> category;
String timeM;
String text;
String image;
Movie({ this.name, this.actors, this.category, this.timeM, this.text, this.image,});
factory Movie.fromJson(Map<String, dynamic> json) => Movie(
name: json["name"],
actors: List<Actor>.from(json["actors"].map((x) => Actor.fromJson(x))),
category: List<Category>.from(json["category"].map((x) => Category.fromJson(x))),
timeM: json["timeM"] == null ? null : json["timeM"],
text: json["text"],
image: json["image"],
);
}
class Actor {
String name1;
String name2;
String name3;
Actor({this.name1,this.name2,this.name3,
});
factory Actor.fromJson(Map<String, dynamic> json) => Actor(
name1: json["name1"] == null ? null : json["name1"],
name2: json["name2"] == null ? null : json["name2"],
name3: json["name3"] == null ? null : json["name3"],
);
}
class Category {
String genre1;
String genre2;
String genre3;
Category({this.genre1,this.genre2,this.genre3,
});
factory Category.fromJson(Map<String, dynamic> json) => Category(
genre1: json["genre1"] == null ? null : json["genre1"],
genre2: json["genre2"] == null ? null : json["genre2"],
genre3: json["genre3"] == null ? null : json["genre3"],
);
}
我的小部件 class
class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
var movies;
void loadAsset() async {
final response = await rootBundle.loadString('assets/movies.json');
final movieModel = movieListFromJson(response);
setState(() {
movies = movieModel;
});
}
_AppState() {
loadAsset();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: true,
home: Scaffold(
body: Text(movies[2].category[1].genre1),
appBar: AppBar(
title: Text('movie schedules'),
),
),
);
}
}
一个非常优雅的解决方案是使用 FutureBuilder 来处理读取文件的异步操作。 它会像这样美丽:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: true,
home: Scaffold(
body: FutureBuilder(
future:
builder: (context, snapshot) {
if (snapshot.hasData()) {
return Text(snapshot.data[2].category[1].genre1),
}
return CircularProgressIndicator();
}
)
appBar: AppBar(
title: Text('movie schedules'),
),
),
);
}
您甚至可以获得一个 CircularProgressIndicator 来指示您正在加载文件
从新手到新手 gitrepo 为你我的朋友喜欢:) https://github.com/nitinsingh9x/flutterFutureBuilder
class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
`return FutureBuilder(`
future: rootBundle.loadString('assets/movies.json'),
builder: (BuildContext context, AsyncSnapshot snap) {
if (snap.hasData) {
var movies = movieListFromJson(snap.data);
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple, title: Text('Movies')),
body: Column(
children:
movies.movies.map((movie) => Text(movie.name)).toList(),
));
} else {
return CircularProgressIndicator();
}
},
);
}
}
如果那是问题,我不知道,但尝试使用 initState 而不是构造函数。
initState() {
final response = await rootBundle.loadString('assets/movies.json');
final movieModel = movieListFromJson(response);
setState(() {
movies = movieModel;
});
}
在正文中,如果您的 JSON 未加载时显示某些内容。
...
body: movies ? Text(movies[2].category[1].genre1) : CircularProgressIndiciator(),
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.