Flutter Cubit+Clean架构下ListView显示空值但打印有数据问题

1. 确认Success状态下的数据实际长度 #

在页面代码的success分支中添加打印，直接输出grievance列表的长度，确认数据是否真的传递到了UI层：

success: (data) {
  final response = data;
  // 添加打印验证数据长度
  print("Grievance列表长度: ${response.data.grievance.length}");
  return ListView.builder(
      itemCount: response.data.grievance.length,
      itemBuilder: (_, index) {
        return Container(
          width: size.width,
          height: 90,
          color: Colors.green,
        );
      });
}

如果打印结果为0，说明数据解析或传递环节出问题；如果长度大于0，再排查UI布局问题。

2. 检查JSON字段映射与Model拼写 #

• 注意到Model中列表字段名为grievance，但对应的类名是GrivenceModels（拼写少一个e），必须确认接口返回的JSON中该列表的字段名和Model完全匹配（大小写敏感）。
• 由于Model使用了FieldRename.snake，接口返回的下划线命名字段会自动转驼峰，但如果接口字段拼写错误（比如grivences），会触发@Default([])，导致列表为空。

3. 排查JSON解析的正确性 #

在HomeDataSourceImpl的getHomeData方法中，打印解析后的Model数据，确认解析环节是否正常：

final response = await _dio.get('home');
if (response.statusCode == 200) {
  final homeData = HomeDataListModels.fromJson(response.data);
  // 对比原始数据和解析后的数据长度
  print("解析后的Grievance长度: ${homeData.grievance.length}");
  print("原始接口Grievance数据: ${response.data['grievance']}");
  return ApiResponse(
    data: homeData,
    message: 'message',
  );
}

如果两者长度不一致，说明Model字段映射有误。

4. 修复UI嵌套Scaffold的布局问题 #

页面代码的success分支嵌套了新的Scaffold，外层已存在Scaffold，嵌套会导致布局约束异常，可能让ListView无法正常显示。直接移除内层Scaffold：

success: (data) {
  final response = data;
  return ListView.builder(
      itemCount: response.data.grievance.length,
      itemBuilder: (_, index) {
        return Container(
          width: size.width,
          height: 90,
          color: Colors.green,
        );
      });
}

5. 检查ApiResponse的传递逻辑 #

在HomeDataRepositoryImpl中，当前代码重新创建了ApiResponse对象，可能存在数据丢失风险，直接返回远程数据源的响应即可：

try {
  final response = await _remoteSource.getHomeData();
  return right(response); // 替换原来的重新创建逻辑
} on AppException catch (e) {
  return left(AppError.serverError(message: e.message));
}

6. 确认State状态切换是否触发 #

在HomeDataCubit的getHomeData方法中，添加打印确认状态是否正确切换到success：

emit(
  response.fold(
    (error) {
      print("请求错误: ${error.toString()}");
      return error.when(
        serverError: (message) => HomeDataState.error(message: message),
        noInternet: () => const HomeDataState.noInternet(),
      );
    },
    (response) {
      print("请求成功，Grievance长度: ${response.data.grievance.length}");
      return HomeDataState.success(data: response);
    },
  ),
);

如果没有打印成功日志，说明请求逻辑存在分支未覆盖的情况。

内容的提问来源于stack exchange，提问作者Mr.Robot