FlutterFlow中API返回字符串反序列化及ListView展示指导

步骤1：调整自定义Action，返回正确的List数据 #

你用json.decode得到的是外层Map结构，核心是要提取其中的data数组。修改自定义Action的逻辑：

import 'dart:convert';

// 自定义Action核心处理逻辑
List<dynamic> parseApiResponse(String jsonString) {
  final decodedMap = json.decode(jsonString) as Map<String, dynamic>;
  // 提取data数组，为空时返回空列表避免报错
  final dataList = decodedMap['data'] as List<dynamic>? ?? [];
  return dataList;
}

记得把自定义Action的返回类型设置为List<dynamic>，确保后续能直接对接ListView数据源。

步骤2：将解析结果存入页面状态变量 #

在FlutterFlow页面编辑器中操作：

• 打开State Management面板，新建一个页面状态变量，类型选择List<dynamic>（如果后续用模型类，就选对应模型的List类型）。
• 在调用自定义Action的流程里，添加"Set State"动作，把自定义Action返回的结果赋值给这个状态变量。

步骤3：绑定状态变量到ListView #

选中页面上的ListView组件：

• 在右侧属性面板的List Data选项中，选择刚才创建的状态变量。
• 进入ListView的Item模板，展示数据时用item[index]['字段名']取值，比如：
  • 显示日期：item[index]['anhos_fecha']
  • 显示金额：item[index]['anhos_valor'].toString()

进阶：用模型类规范数据（可选） #

如果想要更安全的数据访问和更易维护的代码，可以创建模型类：

1. 在FlutterFlow的Data > Models中新建模型，命名为AnhosModel，添加对应字段：
   • anhosId（类型：double）
   • anhosFecha（类型：DateTime）
   • anhosValor（类型：double）
   • anhosViajeId（类型：double）
2. 修改自定义Action，将data数组转成模型列表：

import 'dart:convert';
// 导入你创建的模型类，路径根据实际情况调整
import '../models/anhos_model.dart';

List<AnhosModel> parseApiResponse(String jsonString) {
  final decodedMap = json.decode(jsonString) as Map<String, dynamic>;
  final dataList = decodedMap['data'] as List<dynamic>? ?? [];
  
  return dataList.map((item) => AnhosModel(
    anhosId: item['anhos_id'],
    anhosFecha: DateTime.parse(item['anhos_fecha']),
    anhosValor: item['anhos_valor'],
    anhosViajeId: item['anhos_viaje_id'],
  )).toList();
}

3. 把状态变量类型改为List<AnhosModel>，绑定ListView后，Item中可以直接用item.anhosFecha、item.anhosValor的方式访问字段，无需再用字符串键值。

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