Flutter遍历API返回的JSON模型按vehbodyopen字段拆分数据实现方法

你有JS开发背景的话，Dart的数组操作逻辑和JS几乎一致，只需要注意Dart的空安全规则和类型声明即可，具体实现步骤如下：

1. 声明存储分类数据的列表 #

在你需要持有数据的位置（比如Widget的State类中、请求成功的回调作用域内）声明两个指定类型的空列表：

// 存储vehbodyopen为Y的车辆数据
List<Vehicle> openVehicles = [];
// 存储vehbodyopen为N的车辆数据
List<Vehicle> closeVehicles = [];

2. 遍历拆分数据 #

拿到getVehicles接口返回的VehicleList实例后，有两种常用实现方式：

方式1：forEach遍历（和JS用法完全一致） #

// 先做空判断，避免空异常
if (vehicleList?.vehicles != null) {
  vehicleList!.vehicles.forEach((vehicle) {
    if (vehicle.vehbodyopen == 'Y') {
      openVehicles.add(vehicle);
    } else if (vehicle.vehbodyopen == 'N') {
      closeVehicles.add(vehicle);
    }
  });
}

方式2：条件过滤（对应JS的Array.filter方法） #

Dart的where方法等价于JS的filter，最后调用toList()把过滤后的迭代器转为列表即可：

if (vehicleList?.vehicles != null) {
  openVehicles = vehicleList!.vehicles.where((v) => v.vehbodyopen == 'Y').toList();
  closeVehicles = vehicleList!.vehicles.where((v) => v.vehbodyopen == 'N').toList();
}

3. ListView.builder 示例 #

你可以直接把拆分后的列表传给ListView.builder渲染：

// 以展示openVehicles为例
ListView.builder(
  itemCount: openVehicles.length,
  itemBuilder: (context, index) {
    final vehicle = openVehicles[index];
    return ListTile(
      title: Text(vehicle.vehname),
      subtitle: Text(vehicle.vehdescrip),
    );
  }
)

小优化提示 #

你现有代码里的var vehicleModel = null;不符合Dart空安全规范，建议修改为VehicleList? vehicleModel;避免编译警告。

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