Question

我想做的是在Flutter应用程序内的卡上显示API数据（书名和审阅URL）。它是纽约时代的API，我想展示所有斯蒂芬·金书评。所有这些都被打印到控制台中，但是在屏幕上什么也没有发生。当我单击按钮时，它只会被打印，但是我希望数据显示在屏幕上的Card中。请帮助，这是代码


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

//outsource the class BookReview for OOP
class BookReview extends StatefulWidget {
  static const apiKey = 'jH8F2A1FCudwGV8udVAU4YSLLEr8vqxT';
  static const apiURL =
      'https://api.nytimes.com/svc/books/v3/reviews.json?author=Stephen+King&api-key=$apiKey';

  @override
  _BookReviewState createState() => _BookReviewState();
}

class _BookReviewState extends State<BookReview> {
  @override
  void initState() {
    super.initState();
    getBookData();
  }

  Card bookCard;

  var bookNum = List.generate(66, (i) => i);

  Future<Card> getBookData() async {
    http.Response response = await http.get(BookReview.apiURL);

    if (response.statusCode == 200) {
      var decodedData = jsonDecode(response.body);

      for (int book in bookNum) {
        String bookTitle = decodedData['results'][book]['book_title'];
        String reviewURL = decodedData['results'][book]['url'];

        print(bookTitle + ' ' + reviewURL);
      }

      return Card(
          color: Colors.red,
          child: Column(
            children: [],
          ));
    } else {
      print(response.statusCode);
      throw ('there is an error with the status code');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stephen King NYT Reviews'),
      ),
      body: Column(
        children: [
          FlatButton(
            onPressed: () async {
              final Card tmpBookCard = await getBookData();
              setState(() {
                bookCard = tmpBookCard;
              });
            },
            child: Icon(
              Icons.picture_as_pdf,
              size: 50.0,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您没有在构建功能中使用 bookCard 小部件。例如，您应该在FlatButton窗口小部件的顶部使用bookCard。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stephen King NYT Reviews'),
      ),
      body: Column(
        children: [
          bookCard,
          FlatButton(
            onPressed: () async {
              final Card tmpBookCard = await getBookData();
              setState(() {
                bookCard = tmpBookCard;
              });
            },
            child: Icon(
              Icons.picture_as_pdf,
              size: 50.0,
            ),
          ),
        ],
      ),
    );
  }

Answer 2

我看不到您在bookCard中定义的位置，也看不到 getBookData（）中的内容，您没有将获取的数据插入返回的Card中

api数据不显示在屏幕上，仅在控制台中

2 个答案: