FlutterFlow中复杂JSON响应的部分反序列化处理需求

1. 创建对应层级的自定义数据类型 #

在FlutterFlow的「数据类型」模块里，依次创建三个嵌套的自定义类型：

• 主类型（命名比如FamilyMain）：添加字段name（字符串）、sruname（字符串）、uncle（列表类型，关联下一级UncleType）
• UncleType类型：添加naemUncle（字符串）、surnameUncle（字符串）、cusin（列表类型，关联CusinType）
• CusinType类型：添加nemCusin（字符串）、surnamneCusin（字符串）

注：字段名严格按需求里的拼写设置，若API返回的是正确拼写（比如surname、nameUncle），记得同步调整，避免解析失败。

2. 编写自定义反序列化函数 #

在FlutterFlow的「自定义函数」中新建Dart函数，专门处理API响应的部分解析：

import 'dart:convert';

List<FamilyMain> parseFamilyData(String apiResponse) {
  // 解析整个JSON字符串
  final jsonRoot = json.decode(apiResponse);
  // 直接跳过顶层的version、result_code等字段，取data数组
  final dataArray = jsonRoot['data'] as List;

  // 遍历data数组，逐个解析成自定义类型
  return dataArray.map((mainItem) {
    // 解析uncle列表
    final uncleList = (mainItem['uncle'] as List).map((uncleItem) {
      // 解析uncle下的cusin列表
      final cusinList = (uncleItem['cusin'] as List).map((cusinItem) {
        return CusinType(
          nemCusin: cusinItem['nemCusin'] ?? '',
          surnamneCusin: cusinItem['surnamneCusin'] ?? '',
        );
      }).toList();

      return UncleType(
        naemUncle: uncleItem['naemUncle'] ?? '',
        surnameUncle: uncleItem['surnameUncle'] ?? '',
        cusin: cusinList,
      );
    }).toList();

    return FamilyMain(
      name: mainItem['name'] ?? '',
      sruname: mainItem['sruname'] ?? '',
      uncle: uncleList,
    );
  }).toList();
}

给每个字段加?? ''是为了防止API返回缺失字段时崩溃，实际场景可以根据需求替换成其他默认值。

3. 对接API调用完成解析 #

• 在FlutterFlow中添加API调用动作，获取到完整的JSON响应字符串
• 调用上面的自定义函数，把API响应字符串传入，得到解析后的FamilyMain列表
• 将解析后的列表存入状态变量，后续页面就能直接使用简化后的自定义数据了

额外提醒 #

• 如果API返回的data是单个对象而非数组，需要修改函数逻辑，去掉外层的map处理，直接解析单个对象
• 测试时可以先打印API返回的JSON结构，确保字段名和自定义函数里的取值完全匹配

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