Flutter 没有显示任何结果

Question

我正在阅读 Simone Alessandria 撰写的《Flutter Cookbook - 第二版》第 15 章。我按照以下步骤创建这些代码：

book_list_screen.dart

import 'package:flutter/material.dart';
import '../models/book.dart';
import '../data/http_helper.dart';

class BookListScreen extends StatefulWidget {
  const BookListScreen({super.key});
  @override
  State<BookListScreen> createState() => _BookListScreenState();
}

class _BookListScreenState extends State<BookListScreen> {
  List<Book> books = [];
  List<Color> bgColors = [];

  @override
  Widget build(BuildContext context) {
    bool isLargeScreen;
    if (MediaQuery.of(context).size.width > 600) {
      isLargeScreen = true;
    } else {
      isLargeScreen = false;
    }
    return Scaffold(
        appBar: AppBar(title: const Text('Books')),
        body: GridView.count(
            childAspectRatio: isLargeScreen ? 8 : 5,
            crossAxisCount: isLargeScreen ? 2 : 1,
            children: List.generate(books.length, (index) {
              return GestureDetector(
                  onTap: () => setColor(Colors.lightBlue, index),
                  onSecondaryTap: () => setColor(Colors.white, index),
                  onLongPress: () => setColor(Colors.white, index),
                  child: ColoredBox(
                      color:
                          bgColors.isNotEmpty ? bgColors[index] : Colors.white,
                      child: ListTile(
                        title: Text(books[index].title),
                        subtitle: Text(books[index].authors),
                        leading: CircleAvatar(
                          backgroundImage: (books[index].thumbnail) == ''
                              ? null
                              : NetworkImage(books[index].thumbnail),
                        ),
                      )));
            })));
  }

  @override
  void initState() {
    super.initState();
    final HttpHelper helper = HttpHelper();
    helper.getBooks('flutter').then((List<Book> value) {
      int i;
      for (i = 0; i < value.length; i++) {
        bgColors.add(Colors.white);
      }
    });
  }

  void setColor(Color color, int index) {
    setState(() {
      bgColors[index] = color;
    });
  }
}

http_helper.dart

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:http/http.dart';
import '../models/book.dart';

class HttpHelper {
  static const String authority = 'www.googleapis.com';
  static const path = '/books/v1/volumes';

  Future<List<Book>> getBooks(String query) async {
    Map<String, dynamic> params = {
      'q': query,
      'maxResults': '40',
    };
    Uri uri = Uri.https(authority, path, params);
    Response result = await http.get(uri);
    if (result.statusCode == 200) {
      final jsonResponse = json.decode(result.body);
      final booksMap = jsonResponse['items'];
      List<Book> books = booksMap.map<Book>((i) => Book.fromJson(i)).toList();
      return books;
    } else {
      return [];
    }
  }
}

book.dart

class Book {
  final String id;
  final String title;
  final String authors;
  final String thumbnail;
  final String description;
  const Book(
      this.id, this.title, this.authors, this.thumbnail, this.description);

  factory Book.fromJson(Map<String, dynamic> parsedJson) {
    final String id = parsedJson['id'];
    final String title = parsedJson['volumeInfo']['title'];
    String image = parsedJson['volumeInfo']['imageLinks'] == null
        ? ''
        : parsedJson['volumeInfo']['imageLinks']['thumbnail'];
    image.replaceAll('http://', 'https://');
    final String authors = (parsedJson['volumeInfo']['authors'] == null)
        ? ''
        : parsedJson['volumeInfo']['authors'].toString();
    final String description = (parsedJson['volumeInfo']['description'] == null)
        ? ''
        : parsedJson['volumeInfo']['description'];
    return Book(id, title, authors, image, description);
  }
}

当我运行应用程序时，书名显示在顶部。不幸的是，其他信息（例如作者和缩略图）根本不可见。可能是什么问题？

完整代码可以在作者的GitHub

找到

Answer 1

您没有在

books

方法中更新

initState

列表。您仅更新

bgColors

列表，而不是

books

列表。

    @override
void initState() {
  super.initState();
  final HttpHelper helper = HttpHelper();
  helper.getBooks('flutter').then((List<Book> value) {
    setState(() {
      books = value;
      int i;
      for (i = 0; i < value.length; i++) {
        bgColors.add(Colors.white);
      }
    });
  });
}