时间戳

首页 > 解决方案 > 如何通过 JSON 中的 http 列表收集循环

flutter - 如何通过 JSON 中的 http 列表收集循环

问题描述

我正在学习 Flutter，但我已经做了一段时间的开发人员了。我正在使用我的一个网站使其无头，并尝试将数据输入我的应用程序。

我正在关注这个例子：https ://flutter.dev/docs/cookbook/networking/fetch-data

在此示例中，他们获取单个用户。如果有多个用户，我对这将如何改变感到有点迷茫。

例如，如果数据的结构更像：

{'users':[{'userId':1,'id':1,'title':'title1','body':'This is Body 1'},{'userId':2,'id':2,'title':'title2','body':'This is Body 2'}]

你怎么能用教程中的方法来捕捉呢？你怎么能遍历列表并显示一些简单的东西，比如标题和正文？

标签： flutter

解决方案

使用教程中的示例，您可以这样做：

class Users {
  final List<Post> users;

  Users({this.users});

  factory Users.fromJson(Map<String, dynamic> json) {
    List<Post> tempUsers = [];
    for (int i = 0; i < json['users'].length; i++) {
      Post post = Post.fromJson(json['users'][i]);
      tempUsers.add(post);
    }
    return Users(users: tempUsers);
  }
}

这是教程中的 Post 类：

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

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

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

要显示标题和正文列表，您可以像这样更改教程中的 FutureBuilder：

final Future<Users> users;

...

FutureBuilder<Users>(
  future: users,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.users.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              Text('Title: ${snapshot.data.users[index].title}'),
              Text('Body: ${snapshot.data.users[index].body}'),
            ],
          );
        },
      );
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner.
    return CircularProgressIndicator();
  },
),

我推荐你这篇文章来了解更多关于解析 JSON： Parsing complex JSON in Flutter

此外，您可以在此处找到有关如何进行手动序列化和自动序列化的更多信息： JSON 和序列化

推荐阅读