json - 带有图像列表的 Listview 未填充 Flutter

Question

我想将 Json 中的图像显示到列表中。我不知道为什么它不能正确解析图像。我正在尝试从嵌套列表中获取图像，但始终显示列表类型错误不是列表类型。 https://imgur.com/AVGNSdl

我的Json是这样的

[
    {
    "PhoneNo": "030780229",
    "VehicleNo": "1838",
    "Features": "1111",
    "Category": "Sedan",
    "carsalingImage": [
    {
    "PhoneNo": "030780229",
    "VehicleNo": "1838",
    "ImageURL": "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBsRXhpZgAASUkqAAgAAAADADEBAgAHAAAA",
    "Id": 0
},
 {
    "PhoneNo": "030780229",
    "VehicleNo": "1838",
    "ImageURL": "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBsRXhpZgAASUkqAAgAAAADADEBAgAHAAAA",
    "Id": 0
}
]

我的构建功能是

  Uint8List _bytesImage;
  List<CarSaleImage> userList;

  Widget build(BuildContext context) {
    return FutureBuilder<List<CarModel>>(
      future: _fetchNewVehicles(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          List<CarModel> data = snapshot.data;
          return _showlistView(data);
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        return CircularProgressIndicator();
      },
    );
  }



 Future<List<CarModel>> _fetchNewVehicles() async {
    final response = await http.get(uri);
    print(uri);
    if (response.statusCode == 200) {
      // setState(() {
      List jsonResponse = json.decode(response.body);
      //
      userList = (jsonResponse[0]['carsalingImage'])
          .map((itemWord) => CarSaleImage.fromJson(itemWord))
          .toList();
      print(userList.length);
      //
      return jsonResponse.map((c) => new CarModel.fromJson(c)).toList();
      // });
    } else {
      throw Exception('Failed to load data from API');
    }
  }

  ListView _showlistView(data) {
    return ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (context, index) {
          return _itemBuilder(
              context,
              index,
              data[index].manufacturerName ??
                  '' + "Model: " + data[index].model ??
                  '' + "year: " + data[index].year + '');
        });
  }

  Widget _itemBuilder(BuildContext context, int index, String texts) {
    return InkWell(
        child: Card(
            child: Column(children: <Widget>[
          SizedBox(
            height: 200.0,
            child: ListView.builder(
              physics: ClampingScrollPhysics(),
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: userList.length,
              itemBuilder: (BuildContext context, int index) => Card(
                child: Container(
                    width: MediaQuery.of(context).size.width - 40,
                    child: Center(
                        child: Image(
                            image:
                                returnImg(userList[index].imageUrl.toString())
                                    .image))),
              ),
            ),
          ),
          Text(
            'Demo Headline 2',
          ),
          Container(
            height: 50,
            child: Text(
              "${texts}",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                color: Colors.orange,
              ),
            ),
          ),
        ])),
        onTap: () {
          print(texts);
        });
  }

  Image returnImg(String bytesData) {
    _bytesImage = base64.decode(bytesData.split(',').last);
    return Image.memory(_bytesImage);
  }

我的模型类是

CarModel carVecFromJson(String str) => CarModel.fromJson(json.decode(str));

String carVecToJson(CarModel data) => json.encode(data.toJson());

class CarModel {
  CarModel({
    this.phoneNo,
    this.vehicleNo,
    this.features,
    
    this.category,
    this.carsalingImage,
  });

  String phoneNo;
  String vehicleNo;
  String features;
  
  String category;
  List<CarSaleImage> carsalingImage;

  factory CarModel.fromJson(Map<String, dynamic> json) => CarModel(
        phoneNo: json["PhoneNo"],
        vehicleNo: json["VehicleNo"],
        features: json["Features"],
       
        category: json["Category"],
        carsalingImage: List<CarSaleImage>.from(
            json["carsalingImage"].map((x) => CarSaleImage.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "PhoneNo": phoneNo,
        "VehicleNo": vehicleNo,
        "Features": features,
        "Category": category,
        "carsalingImage":
            List<dynamic>.from(carsalingImage.map((x) => x.toJson())),
      };
}

class CarSaleImage {
  CarSaleImage({
    this.phoneNo,
    this.vehicleNo,
    this.imageUrl,
    this.id,
  });

  String phoneNo;
  String vehicleNo;
  String imageUrl;
  int id;

  factory CarSaleImage.fromJson(Map<String, dynamic> json) => CarSaleImage(
        phoneNo: json["PhoneNo"],
        vehicleNo: json["VehicleNo"],
        imageUrl: json["ImageURL"],
        id: json["Id"],
      );

  Map<String, dynamic> toJson() => {
        "PhoneNo": phoneNo,
        "VehicleNo": vehicleNo,
        "ImageURL": imageUrl,
        "Id": id,
      };
}

如何解决这个问题。有什么帮助吗？

标签： jsonflutterparsinglistview

Answer 1

请更新CarModel并重试。

factory CarModel.fromJson(Map<String, dynamic> json) => CarModel(
    phoneNo: json["PhoneNo"],
    vehicleNo: json["VehicleNo"],
    features: json["Features"],
   
    category: json["Category"],
    carsalingImage: 
        json["carsalingImage"].map((x) => CarSaleImage.fromJson(x)).toList(),
);


Map<String, dynamic> toJson() => {
    "PhoneNo": phoneNo,
    "VehicleNo": vehicleNo,
    "Features": features,
    "Category": category,
    "carsalingImage": carsalingImage.map((x) => x.toJson()).toList(),
};