Flutter：如何使用 JSON 加载所有分页数据

【问题标题】：Flutter: How to load all paged data with JSONFlutter：如何使用 JSON 加载所有分页数据
【发布时间】：2018-06-07 20:06:18
【问题描述】：

我有一个 wordpress 页面，我可以在其中发布帖子。 当我在 Wordpress 中超过 10 个出版物时发现问题，应用程序只接收最近的 10 个出版物。

我想实现显示所有帖子。但我不知道如何开始。

目前我有 15 个出版物，正如您在图片中看到的，只显示最后 10 个，我希望能解决这个问题，谢谢

这是我的 JSON 代码

    [
  {
    "id": 65,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 1 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 1</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 1...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 650,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 2 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 2</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 2...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 3 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 3</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 3...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 236,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 4 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 4</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 4...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 330,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 5 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 5</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 5...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 6 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 6</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 6...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 7 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 7</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 7...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 8 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 8</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 8...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 9 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 9</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 9...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 10 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 10</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 10...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
  {
    "id": 230,
    "date": "2014-08-24T18:56:26",
    "date_gmt": "2014-08-24T18:56:26",
    "guid": {
      "rendered": "http:\/\/********\/********\/?p=1"
    },
    "modified": "2018-06-05T13:24:58",
    "modified_gmt": "2018-06-05T13:24:58",
    "slug": "this-url-wordpress",
    "status": "publish",
    "type": "post",
    "title": {
      "rendered": "\u2018 This a test title 11 \u2019"
     },
     "content": {
       "rendered": "<p>This is a content 11</p>",
       "protected": false
     },
     "excerpt": {
       "rendered": "<p>this a excerpt 11...<\/p>\n",
       "protected": false
     },
     "author": 1,
     "featured_media": 468,
     "comment_status": "open",
     "ping_status": "open",
     "sticky": false,
     "template": "",
     "format": "standard",
     "meta": [ 
     ],
     "categories": [
      14
     ],
     "tags": [
      17,
      18
     ],
  },
]

这是我的 Dart 代码：

Future<List<Post>> fetchPosts() async {
  http.Response response =
  await http.get("http://*********:88/WordPress/wp-json/wp/v2/posts/");
  List responseJson = json.decode(response.body);
  return responseJson.map((m) => new Post.fromJson(m)).toList();
}

class Post {
    final String title;
    final String body;
    final String content;
    final String urlimagen;
    final String linkWeb;

  Post({this.title, this.body, this.content, this.urlimagen, this.linkWeb});

  factory Post.fromJson(Map<String, dynamic> json) {
      return new Post(
        title: json['title']['rendered'].toString(),
        body: json['excerpt']['rendered'].toString(),
        content: json['content']['rendered'].toString(),
        linkWeb: json['link'].toString(),
      );
    }
  }

  class NewsState extends State<NewsPage> {
    int _count = 0;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: new AppBar(
          title: new Text("Noticias"),
          centerTitle: true,
          backgroundColor: Colors.deepOrange[700],
        ),
        body: new Container(
          child: new RefreshIndicator(
              child: new ListView(
                children: <Widget>[
                 new FutureBuilder<List<Post>>(
                      future: fetchPosts(),
                      builder: (context, snapshotImg) {
                        if (snapshotImg.hasData){
                          List<Post> posts = snapshotImg.data;
                          return new Column(
                          children: posts.map((post) => new Column(
                          children: _getItems(post.title, post.body, post.content, post.linkWeb),
                          )).toList()
                        );
                      }
                      else if(snapshotImg.hasError)
                      {
                        return new Text("${snapshotImg.error}");
                      }
                        return new Center(
                          child: new Column(
                             children: <Widget>[
                              new Padding(padding: new dgeInsets.all(50.0)),
                              new CircularProgressIndicator(),
                            ],
                          ),
                        );
                      },
                    ),
                  ],
                ),
              onRefresh: _handleRefresh,
          ),
        )
      );
    }

    List<Widget> _getItems(String title, String description, String content, String url) {
      var items = <Widget>[];
      var item = new Column(
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.language, color: Colors.deepOrange[700], size: 30.0,),
              title: new Text(title),
              subtitle: new Text(description),
              onTap: ()
              {
                Navigator.push(
                    context,
                    new MaterialPageRoute(builder: (context) => new WebView(url: url, title: title)));
              },
            ),
                  new Divider(
                    color: Colors.deepOrange[700],
              height: 2.0,
            ),
          ],
        );
        items.add(item);
      return items;
    }

    Future<Null> _handleRefresh() async {
      await new Future.delayed(new Duration(seconds: 3));

      setState(() {
        _count += 5;
      });

      return null;
    }
}

应用中的内容示例

【问题讨论】：

  • 您不想要“无限”列表，因为它会占用“无限”内存并使您的设备崩溃。您正在寻找的本质上是延迟加载分页数据......当您滚动它时会加载下一个数据集等。
  • 是的，你说得对，我改了帖子的标题，谢谢。
  • 列表 帖子 = snapshotImg.data;你能打印出这个列表的大小吗？
  • 显示时表示如下：i.gyazo.com/…
  • 您的 JSON api 仅返回 10 个带有此查询的帖子。试试看能否请求更多帖子

标签： dart flutter


【解决方案1】：

我对这个问题的解决方案是由于 Wordpress JSON API REST V2 插件，它将我限制为 10 个出版物

更多信息在： Wordpress API JSON return limit

感谢您的帮助，谢谢。

【讨论】：

    猜你喜欢
    • 2019-12-10
    • 1970-01-01
    • 2020-03-08
    • 2021-06-02
    • 1970-01-01
    • 1970-01-01
    • 2020-01-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode