Flutter中如何在ListView Builder里访问JSON的model字段

核心问题分析 #

你的JSON结构里，model是嵌套在动态键的category对象中的可选字段，需要先遍历提取所有model数据，再用ListView.builder渲染。

方法1：直接操作Map（快速实现） #

步骤1：解析JSON字符串 #

先把JSON转成Dart的List<Map<String, dynamic>>：

import 'dart:convert';

// 假设你的JSON数据已获取（比如从API、本地文件）
String jsonData = '''[
  {
    "vehicle": "roadways",
    "id": "10000",
    "category": {
      "500": {
        "id": "500",
        "name": "Bike",
        "icon": "http://example.com/bike.jpg",
        "model": [
          {
            "id": "510",
            "name": "Harley"
          },
          {
            "id": "520",
            "name": "Kawasaki"
          }
        ]
      },
      "50": {
        "id": "50",
        "name": "Car",
        "icon": "http://example.com/car.jpg"
      }
    }
  },
  {
    "vehicle": "waterways",
    "id": "20000",
    "category": {
      "600": {
        "id": "600",
        "name": "Ship",
        "icon": "http://example.com/ship.jpg",
        "model": [
          {
            "id": "610",
            "name": "model_1"
          },
          {
            "id": "520",
            "name": "model_2"
          }
        ]
      },
      "700": {
        "id": "700",
        "name": "model_3",
        "icon": "http://example.com/car.jpg"
      }
    }
  }
]''';

List<Map<String, dynamic>> vehicles = jsonDecode(jsonData);

步骤2：提取所有model数据 #

遍历每个车辆的分类，筛选出包含model的项并收集数据：

List<Map<String, dynamic>> allModels = [];

for (var vehicle in vehicles) {
  // 获取所有分类对象（忽略分类的动态键）
  var categoryValues = vehicle['category'].values;
  for (var category in categoryValues) {
    // 检查当前分类是否有model字段
    if (category.containsKey('model')) {
      allModels.addAll(List<Map<String, dynamic>>.from(category['model']));
    }
  }
}

步骤3：用ListView.builder渲染 #

直接基于收集到的allModels构建列表：

ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: allModels.length,
  itemBuilder: (context, index) {
    final model = allModels[index];
    return ListTile(
      title: Text(model['name']),
      subtitle: Text('Model ID: ${model['id']}'),
      leading: const Icon(Icons.directions_car),
    );
  },
)

方法2：使用模型类（规范、类型安全） #

对于复杂JSON，推荐用模型类避免类型错误，先创建对应的Dart类：

import 'dart:convert';

class Vehicle {
  final String vehicle;
  final String id;
  final Map<String, Category> categories;

  Vehicle({
    required this.vehicle,
    required this.id,
    required this.categories,
  });

  factory Vehicle.fromJson(Map<String, dynamic> json) {
    final categoryMap = json['category'] as Map<String, dynamic>;
    final categories = <String, Category>{};
    categoryMap.forEach((key, value) {
      categories[key] = Category.fromJson(value);
    });
    return Vehicle(
      vehicle: json['vehicle'],
      id: json['id'],
      categories: categories,
    );
  }
}

class Category {
  final String id;
  final String name;
  final String icon;
  final List<Model>? models; // 可选字段，部分分类无model

  Category({
    required this.id,
    required this.name,
    required this.icon,
    this.models,
  });

  factory Category.fromJson(Map<String, dynamic> json) {
    List<Model>? models;
    if (json.containsKey('model')) {
      models = (json['model'] as List)
          .map((item) => Model.fromJson(item))
          .toList();
    }
    return Category(
      id: json['id'],
      name: json['name'],
      icon: json['icon'],
      models: models,
    );
  }
}

class Model {
  final String id;
  final String name;

  Model({
    required this.id,
    required this.name,
  });

  factory Model.fromJson(Map<String, dynamic> json) {
    return Model(
      id: json['id'],
      name: json['name'],
    );
  }
}

解析与提取数据 #

// 解析成模型对象列表
List<Vehicle> vehicleList = (jsonDecode(jsonData) as List)
    .map((item) => Vehicle.fromJson(item))
    .toList();

// 收集所有model数据
List<Model> allModels = [];
for (var vehicle in vehicleList) {
  for (var category in vehicle.categories.values) {
    if (category.models != null) {
      allModels.addAll(category.models!);
    }
  }
}

渲染列表 #

ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: allModels.length,
  itemBuilder: (context, index) {
    final model = allModels[index];
    return ListTile(
      title: Text(model.name),
      subtitle: Text('Model ID: ${model.id}'),
      leading: const Icon(Icons.directions_car),
    );
  },
)

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