Flutter REST API对接：如何从接口响应中提取slider轮播图片数据

• 首先需要校验接口请求状态，只有响应状态码为200时才进行后续解析操作
• 调用你之前生成的slideDataFromJson方法，将响应字符串转换为已定义的Dart模型对象
• 从解析后的模型对象中直接提取slider列表，遍历即可获取所有轮播图的图片链接
• 注意高版本http包的get方法要求传入Uri类型参数，不能直接传入字符串链接，需要用Uri.parse转换

完整修改后代码 #

// 可在当前State类中提前定义变量存储slider图片链接，方便后续UI层使用
List<String> sliderImages = [];

Future<void> getDataFromInternet() async {
  try {
    var response = await http.get(Uri.parse('https://omanphone.smsoman.com/api/configuration'));
    // 校验请求是否成功
    if (response.statusCode == 200) {
      // 将响应JSON解析为SlideData模型对象
      SlideData slideData = slideDataFromJson(response.body);
      // 清空原有数据避免重复添加
      sliderImages.clear();
      // 遍历slider列表提取图片链接
      for (var sliderItem in slideData.data.slider) {
        sliderImages.add(sliderItem.image);
        // 测试打印，确认提取结果，可删除
        print('轮播图链接：${sliderItem.image}');
      }
    } else {
      print('接口请求失败，状态码：${response.statusCode}');
    }
  } catch (error) {
    print('请求处理出错：$error');
  }
}

注意事项 #

如果你发现代码中Slider类出现冲突报错，是因为和Flutter自带的Slider组件重名，导入模型文件时加个别名即可解决，示例：

import '你的模型文件存放路径/slide_data.dart' as slideModel;
// 使用时替换为
List<slideModel.Slider> sliderList = slideData.data.slider;

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