在dart中显示项目的问题

Question

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
Future getData() async {
var url =
"https://www.googleapis.com/books/v1/volumes?q=book";

var response = await http.get(url);
var responseBody = jsonDecode(response.body);
print(responseBody);

return responseBody;
}

@override
void initState() {
getData();
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) print(snapshot.error);

if (snapshot.hasData) {
return ListView.builder(
itemCount: 25,
itemBuilder: (context, index) {
return Container(
child: Text(snapshot.data[index]['items']));
});
} else {
return Center(child: CircularProgressIndicator());
}
}),
);
}
}

我试图显示从谷歌api获取的数据，他们似乎是显示图书数量的问题。

它拒绝显示ListView中的图书数量。

我做了什么事吗?还是有更好的方法?

你也可以使用https://javiercbk.github.io/json_to_dart/来转换。

Answer 1

问题出在项目生成器上。您使用固定的列表计数为25，并且数据中的项目较少。同样，将整个json对象放在Text小部件中也行不通。我使用json来dart将json输出转换为模型，并为您固定了listviewbuilder + Future。这应该能让你走起来!

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<BookResponse> getData() async {
var url = "https://www.googleapis.com/books/v1/volumes?q=book";
var response = await http.get(url);
var responseBody = jsonDecode(response.body);
print(responseBody);
return BookResponse.fromJson(responseBody);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<BookResponse>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) print(snapshot.error);
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.items.length,
itemBuilder: (context, index) {
return Container(
child: Text(
snapshot.data.items[index].kind,
style: TextStyle(color: Colors.black),
));
});
} else {
return Center(child: CircularProgressIndicator());
}
}),
);
}
}
class BookResponse {
String kind;
int totalItems;
List<Items> items;
BookResponse({this.kind, this.totalItems, this.items});
BookResponse.fromJson(Map<String, dynamic> json) {
kind = json['kind'];
totalItems = json['totalItems'];
if (json['items'] != null) {
items = new List<Items>();
json['items'].forEach((v) {
items.add(new Items.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['kind'] = this.kind;
data['totalItems'] = this.totalItems;
if (this.items != null) {
data['items'] = this.items.map((v) => v.toJson()).toList();
}
return data;
}
}
class Items {
String kind;
String id;
String etag;
String selfLink;
VolumeInfo volumeInfo;
SaleInfo saleInfo;
AccessInfo accessInfo;
SearchInfo searchInfo;
Items(
{this.kind,
this.id,
this.etag,
this.selfLink,
this.volumeInfo,
this.saleInfo,
this.accessInfo,
this.searchInfo});
Items.fromJson(Map<String, dynamic> json) {
kind = json['kind'];
id = json['id'];
etag = json['etag'];
selfLink = json['selfLink'];
volumeInfo = json['volumeInfo'] != null
? new VolumeInfo.fromJson(json['volumeInfo'])
: null;
saleInfo = json['saleInfo'] != null
? new SaleInfo.fromJson(json['saleInfo'])
: null;
accessInfo = json['accessInfo'] != null
? new AccessInfo.fromJson(json['accessInfo'])
: null;
searchInfo = json['searchInfo'] != null
? new SearchInfo.fromJson(json['searchInfo'])
: null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['kind'] = this.kind;
data['id'] = this.id;
data['etag'] = this.etag;
data['selfLink'] = this.selfLink;
if (this.volumeInfo != null) {
data['volumeInfo'] = this.volumeInfo.toJson();
}
if (this.saleInfo != null) {
data['saleInfo'] = this.saleInfo.toJson();
}
if (this.accessInfo != null) {
data['accessInfo'] = this.accessInfo.toJson();
}
if (this.searchInfo != null) {
data['searchInfo'] = this.searchInfo.toJson();
}
return data;
}
}
class VolumeInfo {
String title;
String subtitle;
List<String> authors;
String publisher;
String publishedDate;
String description;
List<IndustryIdentifiers> industryIdentifiers;
ReadingModes readingModes;
int pageCount;
String printType;
List<String> categories;
double averageRating;
int ratingsCount;
String maturityRating;
bool allowAnonLogging;
String contentVersion;
PanelizationSummary panelizationSummary;
ImageLinks imageLinks;
String language;
String previewLink;
String infoLink;
String canonicalVolumeLink;
VolumeInfo(
{this.title,
this.subtitle,
this.authors,
this.publisher,
this.publishedDate,
this.description,
this.industryIdentifiers,
this.readingModes,
this.pageCount,
this.printType,
this.categories,
this.averageRating,
this.ratingsCount,
this.maturityRating,
this.allowAnonLogging,
this.contentVersion,
this.panelizationSummary,
this.imageLinks,
this.language,
this.previewLink,
this.infoLink,
this.canonicalVolumeLink});
VolumeInfo.fromJson(Map<String, dynamic> json) {
title = json['title'];
subtitle = json['subtitle'];
authors = json['authors']?.cast<String>();
publisher = json['publisher'];
publishedDate = json['publishedDate'];
description = json['description'];
if (json['industryIdentifiers'] != null) {
industryIdentifiers = new List<IndustryIdentifiers>();
json['industryIdentifiers'].forEach((v) {
industryIdentifiers.add(new IndustryIdentifiers.fromJson(v));
});
}
readingModes = json['readingModes'] != null
? new ReadingModes.fromJson(json['readingModes'])
: null;
pageCount = json['pageCount'];
printType = json['printType'];
categories = json['categories']?.cast<String>();
averageRating = double.parse(json['averageRating']?.toString() ?? '0');
ratingsCount = json['ratingsCount'];
maturityRating = json['maturityRating'];
allowAnonLogging = json['allowAnonLogging'];
contentVersion = json['contentVersion'];
panelizationSummary = json['panelizationSummary'] != null
? new PanelizationSummary.fromJson(json['panelizationSummary'])
: null;
imageLinks = json['imageLinks'] != null
? new ImageLinks.fromJson(json['imageLinks'])
: null;
language = json['language'];
previewLink = json['previewLink'];
infoLink = json['infoLink'];
canonicalVolumeLink = json['canonicalVolumeLink'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['title'] = this.title;
data['subtitle'] = this.subtitle;
data['authors'] = this.authors;
data['publisher'] = this.publisher;
data['publishedDate'] = this.publishedDate;
data['description'] = this.description;
if (this.industryIdentifiers != null) {
data['industryIdentifiers'] =
this.industryIdentifiers.map((v) => v.toJson()).toList();
}
if (this.readingModes != null) {
data['readingModes'] = this.readingModes.toJson();
}
data['pageCount'] = this.pageCount;
data['printType'] = this.printType;
data['categories'] = this.categories;
data['averageRating'] = this.averageRating;
data['ratingsCount'] = this.ratingsCount;
data['maturityRating'] = this.maturityRating;
data['allowAnonLogging'] = this.allowAnonLogging;
data['contentVersion'] = this.contentVersion;
if (this.panelizationSummary != null) {
data['panelizationSummary'] = this.panelizationSummary.toJson();
}
if (this.imageLinks != null) {
data['imageLinks'] = this.imageLinks.toJson();
}
data['language'] = this.language;
data['previewLink'] = this.previewLink;
data['infoLink'] = this.infoLink;
data['canonicalVolumeLink'] = this.canonicalVolumeLink;
return data;
}
}
class IndustryIdentifiers {
String type;
String identifier;
IndustryIdentifiers({this.type, this.identifier});
IndustryIdentifiers.fromJson(Map<String, dynamic> json) {
type = json['type'];
identifier = json['identifier'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['type'] = this.type;
data['identifier'] = this.identifier;
return data;
}
}
class ReadingModes {
bool text;
bool image;
ReadingModes({this.text, this.image});
ReadingModes.fromJson(Map<String, dynamic> json) {
text = json['text'];
image = json['image'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['text'] = this.text;
data['image'] = this.image;
return data;
}
}
class PanelizationSummary {
bool containsEpubBubbles;
bool containsImageBubbles;
PanelizationSummary({this.containsEpubBubbles, this.containsImageBubbles});
PanelizationSummary.fromJson(Map<String, dynamic> json) {
containsEpubBubbles = json['containsEpubBubbles'];
containsImageBubbles = json['containsImageBubbles'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['containsEpubBubbles'] = this.containsEpubBubbles;
data['containsImageBubbles'] = this.containsImageBubbles;
return data;
}
}
class ImageLinks {
String smallThumbnail;
String thumbnail;
ImageLinks({this.smallThumbnail, this.thumbnail});
ImageLinks.fromJson(Map<String, dynamic> json) {
smallThumbnail = json['smallThumbnail'];
thumbnail = json['thumbnail'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['smallThumbnail'] = this.smallThumbnail;
data['thumbnail'] = this.thumbnail;
return data;
}
}
class SaleInfo {
String country;
String saleability;
bool isEbook;
ListPrice listPrice;
ListPrice retailPrice;
String buyLink;
List<Offers> offers;
SaleInfo(
{this.country,
this.saleability,
this.isEbook,
this.listPrice,
this.retailPrice,
this.buyLink,
this.offers});
SaleInfo.fromJson(Map<String, dynamic> json) {
country = json['country'];
saleability = json['saleability'];
isEbook = json['isEbook'];
listPrice = json['listPrice'] != null
? new ListPrice.fromJson(json['listPrice'])
: null;
retailPrice = json['retailPrice'] != null
? new ListPrice.fromJson(json['retailPrice'])
: null;
buyLink = json['buyLink'];
if (json['offers'] != null) {
offers = new List<Offers>();
json['offers'].forEach((v) {
offers.add(new Offers.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['country'] = this.country;
data['saleability'] = this.saleability;
data['isEbook'] = this.isEbook;
if (this.listPrice != null) {
data['listPrice'] = this.listPrice.toJson();
}
if (this.retailPrice != null) {
data['retailPrice'] = this.retailPrice.toJson();
}
data['buyLink'] = this.buyLink;
if (this.offers != null) {
data['offers'] = this.offers.map((v) => v.toJson()).toList();
}
return data;
}
}
class ListPrice {
double amount;
String currencyCode;
ListPrice({this.amount, this.currencyCode});
ListPrice.fromJson(Map<String, dynamic> json) {
amount = json['amount'];
currencyCode = json['currencyCode'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['amount'] = this.amount;
data['currencyCode'] = this.currencyCode;
return data;
}
}
class Offers {
int finskyOfferType;
ListPrice listPrice;
ListPrice retailPrice;
Offers({this.finskyOfferType, this.listPrice, this.retailPrice});
Offers.fromJson(Map<String, dynamic> json) {
finskyOfferType = json['finskyOfferType'];
listPrice = json['listPrice'] != null
? new ListPrice.fromJson(json['listPrice'])
: null;
retailPrice = json['retailPrice'] != null
? new ListPrice.fromJson(json['retailPrice'])
: null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['finskyOfferType'] = this.finskyOfferType;
if (this.listPrice != null) {
data['listPrice'] = this.listPrice.toJson();
}
if (this.retailPrice != null) {
data['retailPrice'] = this.retailPrice.toJson();
}
return data;
}
}
class AccessInfo {
String country;
String viewability;
bool embeddable;
bool publicDomain;
String textToSpeechPermission;
Epub epub;
Epub pdf;
String webReaderLink;
String accessViewStatus;
bool quoteSharingAllowed;
AccessInfo(
{this.country,
this.viewability,
this.embeddable,
this.publicDomain,
this.textToSpeechPermission,
this.epub,
this.pdf,
this.webReaderLink,
this.accessViewStatus,
this.quoteSharingAllowed});
AccessInfo.fromJson(Map<String, dynamic> json) {
country = json['country'];
viewability = json['viewability'];
embeddable = json['embeddable'];
publicDomain = json['publicDomain'];
textToSpeechPermission = json['textToSpeechPermission'];
epub = json['epub'] != null ? new Epub.fromJson(json['epub']) : null;
pdf = json['pdf'] != null ? new Epub.fromJson(json['pdf']) : null;
webReaderLink = json['webReaderLink'];
accessViewStatus = json['accessViewStatus'];
quoteSharingAllowed = json['quoteSharingAllowed'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['country'] = this.country;
data['viewability'] = this.viewability;
data['embeddable'] = this.embeddable;
data['publicDomain'] = this.publicDomain;
data['textToSpeechPermission'] = this.textToSpeechPermission;
if (this.epub != null) {
data['epub'] = this.epub.toJson();
}
if (this.pdf != null) {
data['pdf'] = this.pdf.toJson();
}
data['webReaderLink'] = this.webReaderLink;
data['accessViewStatus'] = this.accessViewStatus;
data['quoteSharingAllowed'] = this.quoteSharingAllowed;
return data;
}
}
class Epub {
bool isAvailable;
String acsTokenLink;
String downloadLink;
Epub({this.isAvailable, this.acsTokenLink, this.downloadLink});
Epub.fromJson(Map<String, dynamic> json) {
isAvailable = json['isAvailable'];
acsTokenLink = json['acsTokenLink'];
downloadLink = json['downloadLink'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['isAvailable'] = this.isAvailable;
data['acsTokenLink'] = this.acsTokenLink;
data['downloadLink'] = this.downloadLink;
return data;
}
}
class SearchInfo {
String textSnippet;
SearchInfo({this.textSnippet});
SearchInfo.fromJson(Map<String, dynamic> json) {
textSnippet = json['textSnippet'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['textSnippet'] = this.textSnippet;
return data;
}
}