API数据展示——flutter card widget

Question

获取 API 连接成功。但我不知道如何映射数据..如何连接快照.data， 我想在 Stack 小部件中显示数据。

https://flutter.dev/docs/cookbook/networking/fetch-data

我从与此来源的关联中了解到这一点

Future<News> fetchNews() async {
  final response =
  await http.get('#url');
  print(response.body);

  if (response.statusCode == 200) {
    return News.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load news');
  }
}

class News {
  final String title;
  final String description;
  final String image;

  News({this.title, this.description, this.image});

  factory News.fromJson(Map<String, dynamic> json) {
    return News(
      title: json['title'],
      description: json['description'],
      image: json['image'],
    );
  }
}

  Widget _buildPage(BuildContext context, int direction) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: FutureBuilder<News>(
        future: futureNews,
          builder: (context, snapshot) {
          if (snapshot.hasData) {
            return newsCard(snapshot.data);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
      },
    ),
    );
  }

  Widget newsCard(size){
    return Stack(
      children: <Widget>[
        Container(
          child: Image.network(
              image,
              fit: BoxFit.cover
          ),
          height: size.height/2.0,
        ),
        ),
      ],
    );
  }

Answer 1

您的代码有点乱，没有多大意义。很明显，数据没有显示出来，因为您将News 对象传递给newsCard 函数，但参数似乎期待Size。我也不知道你从哪里得到 image 属性，因为它似乎没有在代码中的任何地方声明。

对您的代码进行一些更改，返回您的小部件的最小工作函数如下所示：

Widget _buildPage(BuildContext context, int direction) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: FutureBuilder<News>(
        future: futureNews,
          builder: (context, snapshot) {
          if (snapshot.hasData) {
            return newsCard(snapshot.data, size);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
      },
    ),
    );
  }

  Widget newsCard(News news, Size size){
    return Stack(
      children: <Widget>[
        Container(
          child: Image.network(
              news.image,
              fit: BoxFit.cover
          ),
          height: size.height/2.0,
        ),
        ),
      ],
    );
  }

更新

如果您收到下面提到的错误，很可能您对 get 请求的响应是 News 的列表，而不仅仅是一个 News 对象，因此您必须更改此：

return News.fromJson(jsonDecode(response.body));

到这里：

return jsonDecode(response.body).map<News>((object) => News.fromJson(object)).toList();

fetchNews() 的返回类型应该是Future<List<News>> 而不是Future<News>