Flutter - 从 json 填充未来列表

Question

我想从 json 中填写一个列表。

Future<List<Titles>> fetchTitle() async {
  String url = "https://jsonplaceholder.typicode.com/posts";

  final response = await http.get(url,headers: {'Content-Type': 'application/json'});
  return titlesFromJson(utf8.decode(response.bodyBytes));

如何使用 fetchTitle 方法填写以下列表。我想从 json 添加“标题”项。

final List myLists = [];


Expanded(
            child: GridView.count(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1,
              padding: EdgeInsets.only(left: 20, top: 20, right: 20),
              children:List.generate(myLists.length, (index) {
                return InkWell(

Answer 1

要将 JSON 结果添加到列表中，您可能需要等待响应并将其添加到列表中。由于fetchTitle() 方法返回Future<List<Titles>>，当你等待它时，你会得到一个List<Titles>，它可以分配给你的myList。

myList = await fetchTitle();

由于我们使用的是await，我们可能需要使用async关键字标记方法。

void main() async {
  List myList = [];
  myList = await fetchTitle();

  print(myList);
}

Answer 2

从官方文档来看，这是如何从 json 获取数据并将响应转换为模型列表的方法：

1- 为帖子创建模型

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post({this.userId, this.id, this.title, this.body});

  Post.fromJson(Map<String, dynamic> json) {
    userId = json['userId'];
    id = json['id'];
    title = json['title'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['userId'] = this.userId;
    data['id'] = this.id;
    data['title'] = this.title;
    data['body'] = this.body;
    return data;
  }
}

2 - 导入http包并从链接https://jsonplaceholder.typicode.com/posts获取帖子

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

Future<List<Post>> fetchPosts(http.Client client) async {
  final response = await client
      .get('https://jsonplaceholder.typicode.com/posts');

  return parsePosts(response.body);
}

3 - 使用您在模型上定义的方法创建包含帖子的列表

import 'dart:convert';

List<Post> parsePosts(String responseBody) {
      final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

      return parsed.map<Post>((json) => Post.fromJson(json)).toList();
    }

4 - 要测试您的代码是否正常工作，请创建一个简单的异步主方法，该方法使用 await 前缀调用 fetchPosts，因为 fetchPosts 返回一个 Future，因此如果您不使用 await，您将得到一个未来而不是 List

void main() async {

  List posts = await fetchPosts(http.Client());
  // this will print the id and the title of posts
  posts.forEach((post) => print('Post id: ${post.id}  |  Post title: ${post.title}'));
}

希望对你有所帮助！