Flutter使用JSON解析在ListView展示商品仅显示1条如何解决

你的代码核心问题是JSON字段类型和模型定义类型不匹配，导致解析过程抛出异常中断，最终商品列表没有被成功赋值，始终显示默认测试数据，具体原因如下：

• 你提供的JSON数据中部分字段是字符串类型：第4条商品的amount字段是字符串"0.05000000"、第5条商品的price字段是字符串"3195.00"，但你的Item模型中所有字段都定义为double类型，直接赋值时遇到字符串就会抛出类型错误，整个loadData方法执行到这里就停止了，CatModel.items没有被更新。
• 潜在问题：需要确认你pubspec.yaml中已经正确配置了资源路径，如果你的本地资源文件夹名是默认的assets（带s），代码里写的asset/catalog.json路径是错误的，也会读不到JSON文件。

1. 优化模型解析逻辑，兼容多类型数值 #

修改Item类的fromMap方法，不管JSON字段是int、double还是字符串类型的数值，统一转成double再赋值：

factory Item.fromMap(Map<String, dynamic> map){
  return  Item(
    tid: double.parse(map["tid"].toString()),
    price: double.parse(map["price"].toString()),
    amount: double.parse(map["amount"].toString()),
    date: double.parse(map["date"].toString()),
  );
}

2. 检查资源路径配置 #

打开项目根目录的pubspec.yaml文件，确认flutter节点下已经添加了资源配置，注意路径和你实际存储路径保持一致：

flutter:
  assets:
    - asset/catalog.json
    # 如果你的资源文件夹叫assets，就改为 - assets/catalog.json

3. 增加错误捕获方便排查 #

给loadData方法加try catch，异常时可以在控制台看到具体报错：

loadData() async{
  try {
    final String catalogJson =await rootBundle.loadString("asset/catalog.json");
    final decodedJson = jsonDecode(catalogJson);
    var productData = decodedJson["products"];
    CatModel.items = List.from(productData).map<Item>((item) => Item.fromMap(item)).toList();
    if(mounted) setState(() {});
  } catch (e) {
    print("解析出错：$e");
  }
}

整个流程是标准的本地JSON解析渲染流程：

1. 页面初始化触发initState生命周期，执行loadData异步方法
2. 用rootBundle.loadString读取本地assets目录下的JSON文件内容，拿到JSON字符串
3. 用jsonDecode把JSON字符串转换成Dart可操作的Map对象，取出products字段对应的商品数组
4. 遍历商品数组的每个元素，调用Item.fromMap把Map格式的商品数据转换成Item模型对象，全部转换完成后赋值给CatModel.items
5. 调用setState通知Flutter框架刷新页面，ListView.builder会根据CatModel.items的长度，渲染对应数量的ItemWidget，每个控件传入对应下标的商品数据完成展示

内容的提问来源于stack exchange，提问作者Shaffaan Laughs at u