Flutter解析JSON无数据显示问题排查求助

核心问题分析 #

你的代码无法展示数据的主要原因是JSON结构与Model类不匹配，加上数据解析逻辑错误，导致解析后的实例字段全部为null，最终展示内容为空或异常。

1. Model类与JSON层级不匹配 #

目标JSON中，isRunning、color等目标字段嵌套在devicedata对象内部，但你的Stations类直接从外层JSON对象取值，自然无法获取到正确数据。

2. 服务层解析逻辑错误 #

在getStations()方法中，你直接将外层JSON对象传入Stations.fromJson()，但外层对象并不包含isRunning等字段，导致解析后的Stations所有字段均为null。

修正方案 #

步骤1：调整Model类结构 #

对应JSON的层级结构，拆分出外层条目和嵌套的设备数据模型：

// 对应JSON中的devicedata对象
class StationData {
  int? isRunning;
  String? color;
  String? colorNoW3;
  String? deviceName;

  StationData({
    this.isRunning,
    this.color,
    this.colorNoW3,
    this.deviceName,
  });

  factory StationData.fromJson(Map<String, dynamic> json) {
    return StationData(
      isRunning: json['isRunning'],
      color: json['color'],
      colorNoW3: json['colorNoW3'],
      deviceName: json['device_name'],
    );
  }
}

// 对应JSON中的每个外层条目
class Station {
  int? deviceId;
  String? f2cUid;
  StationData? deviceData;

  Station({
    this.deviceId,
    this.f2cUid,
    this.deviceData,
  });

  factory Station.fromJson(Map<String, dynamic> json) {
    return Station(
      deviceId: json['deviceid'],
      f2cUid: json['f2cuid'],
      deviceData: StationData.fromJson(json['devicedata']),
    );
  }
}

步骤2：修正服务层解析逻辑 #

更新getStations()方法，使用调整后的模型类解析数据，并增加响应状态检查：

Future<List<Station>> getStations() async {
  Uri url = Uri.parse('你的接口URL');

  final response = await http.get(url);

  // 检查请求是否成功
  if (response.statusCode != 200) {
    throw Exception('请求失败: ${response.statusCode}');
  }

  var data = jsonDecode(response.body);
  print('data: $data');
  
  List<Station> stations = data.map((e) => Station.fromJson(e)).toList();
  return stations;
}

步骤3：修正数据展示代码 #

更新FutureBuilder逻辑，读取嵌套的deviceData字段，并增加错误和空数据处理：

return Scaffold(
  appBar: AppBar(
    title: const Text('Sistema Escolar Administrativo'),
  ),
  drawer: DrawerWidgetMenu(),
  body: Container(
    child: FutureBuilder<List<Station>>(
      future: stationSvc.getStations(),
      builder: (BuildContext context, AsyncSnapshot<List<Station>> snapshot) {
        // 处理请求错误
        if (snapshot.hasError) {
          return Center(
            child: Text('请求出错: ${snapshot.error}'),
          );
        }
        // 处理未加载完成状态
        if (!snapshot.hasData) {
          return const Center(
            child: Text('No hay datos que mostrar'),
          );
        }
        // 处理数据为空状态
        if (snapshot.data!.isEmpty) {
          return const Center(
            child: Text('No hay datos, registra un grupo primero'),
          );
        }
        // 展示数据
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (BuildContext context, int index) {
            final station = snapshot.data![index];
            return Card(
              child: InkWell(
                onTap: () {
                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(
                      builder: (context) => HomePage(),
                    ),
                  );
                },
                child: ListTile(
                  leading: Text(station.deviceData?.deviceName ?? '未知设备'),
                  title: Text(station.deviceData?.color ?? '未知颜色'),
                  subtitle: Text(station.deviceData?.colorNoW3 ?? '未知颜色代码'),
                ),
              ),
            );
          },
        );
      },
    ),
  ),
);

额外优化建议 #

• 使用??运算符处理null字段，避免强制解包!导致崩溃
• 为FutureBuilder指定泛型，提升代码类型安全性
• 增加加载状态提示（如CircularProgressIndicator），替代静态文本

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