Flutter中如何通过HTTP请求解析嵌套JSON并在ListView中展示数据

现有代码问题梳理 #

• 缺少嵌套JSON外层结构的解析逻辑，无法逐层提取到员工列表数组和总条数count
• 接口请求成功后未对返回的JSON字符串做解码和序列化处理
• ListView未适配总条数count的展示需求

步骤1：完善接口请求的JSON解析逻辑 #

你不需要额外定义新的模型类，直接在请求成功的回调里逐层解析即可，把接口请求代码中空缺的return部分替换为以下代码：

if (response.statusCode == 200) {
  print(response.statusCode);
  print("ok");
  print(response.body);

  // 新增嵌套JSON解析逻辑
  final Map<String, dynamic> rootJson = jsonDecode(response.body);
  final Map<String, dynamic> outerData = rootJson['data'];
  // 提取总条数count存入State供UI展示
  if(mounted) {
    setState(() {
      _totalCount = outerData['count'] ?? 0;
    });
  }
  // 解析员工列表数组并序列化为ListAlbum对象
  final List<dynamic> employeeList = outerData['data'];
  return employeeList.map((item) => ListAlbum.fromJson(item)).toList();
}

同时在_MyAppState类中新增存储总条数的变量：

class _MyAppState extends State<MyApp> {
  late Future<List<ListAlbum>> futureAlbum;
  // 新增存储总条数的变量
  int _totalCount = 0;

  @override
  void initState() {
    super.initState();
    futureAlbum = listData();
  }
  // 其余代码保持不变
}

步骤2：调整ListView代码展示所需字段 #

修改ListView.builder逻辑，新增头部展示总count，同时展示每个员工的idEmployee和fullName：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: '员工数据展示',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      body: Center(
        child: FutureBuilder<List<ListAlbum>>(
          future: futureAlbum,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                // 总长度=count头部1项 + 员工列表长度
                itemCount: snapshot.data!.length + 1,
                itemBuilder: (context, index) {
                  // 第0位展示总条数count
                  if(index == 0) {
                    return ListTile(
                      title: Text("总员工数：$_totalCount"),
                      tileColor: Colors.grey[200],
                    );
                  }
                  // 员工数据从第1位开始展示
                  final ListAlbum item = snapshot.data![index - 1];
                  return ListTile(
                    title: Text(item.fullName ?? "无姓名"),
                    subtitle: Text("员工ID：${item.idEmployee ?? 0}"),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text('加载失败：${snapshot.error}');
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    ),
  );
}

步骤3：补充必要导入 #

在文件顶部添加JSON解码所需的依赖导入：

import 'dart:convert';

注意事项 #

• 不要直接用!强制解包可空字段，避免空值导致的应用崩溃，建议用??设置默认值
• 示例中使用的测试Token有过期时间，正式使用时请替换为自身业务接口的有效Token
• 接口请求参数的limit当前设置为5，只会返回前5条员工数据，需要调整返回数量可直接修改该参数值

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