Flutter开发中如何从Wordpress获取图片并保存到列表及代码修复

现有代码存在的问题 #

• 列表未初始化：List<CachedNetworkImage> posts;仅完成声明，未创建实际的空列表对象，调用add方法时会抛出空指针异常
• 循环长度错误：遍历判断条件使用了res.body.length，res.body是接口返回的原始JSON字符串，遍历对象应为解析后的数组，需改用resBody.length
• 赋值逻辑错误：循环中已经将图片组件存入posts列表，setState内又将JSON解析后的动态数组直接赋值给posts，既存在类型不匹配问题，也会覆盖之前所有操作结果
• 缺少空值判断：未处理文章无特色媒体的场景，部分未设置特色图的文章会导致字段取值崩溃

修复后完整代码 #

首先修改列表声明：

// 初始化可增长的空列表
List<CachedNetworkImage> posts = [];

修改getPosts方法逻辑：

Future<String> getPosts() async {
  var res = await http.get(Uri.parse(apiUrl + "posts?_embed"), headers: {"Accept": "application/json"});
  var resBody = json.decode(res.body);
  // 先清空原有数据避免重复添加
  posts.clear();
  // 遍历解析后的接口返回数组，不是原始字符串长度
  for(int i = 0; i < resBody.length; i++ ) {
    // 先判断是否存在特色媒体字段，避免崩溃
    if(resBody[i]["_embedded"]?["wp:featuredmedia"]?[0]?["source_url"] != null) {
      posts.add(CachedNetworkImage(
        imageUrl: resBody[i]["_embedded"]["wp:featuredmedia"][0]["source_url"],
        errorWidget: (context, url, error) => Icon(Icons.error),
      ));
    } else {
      // 没有特色图的场景，可替换为本地占位图资源或通用占位图地址，不需要占位也可以删除该分支直接跳过
      posts.add(CachedNetworkImage(
        imageUrl: "你的占位图地址",
        errorWidget: (context, url, error) => Icon(Icons.error),
      ));
    }
  }
  setState(() {
    // 仅触发状态刷新即可，无需重新赋值覆盖posts
    print(posts);
  });
  return "Success!";
}

内容的提问来源于stack exchange，提问作者Mat Koffman