如何将嵌套JSON对象转为列表并在Flutter的ListView.builder中展示？

先明确场景示例JSON #

假设你拿到的JSON结构如下（两种常见情况）：

情况1：data包含多个子业务对象

{
  "code": 200,
  "message": "success",
  "data": {
    "userInfo": {
      "name": "张三",
      "age": 28,
      "email": "zhangsan@example.com"
    },
    "orderStats": {
      "totalOrders": 15,
      "pendingOrders": 3,
      "completedOrders": 12
    },
    "recentArticles": {
      "article1": "Flutter状态管理入门",
      "article2": "Dart异步编程详解"
    }
  }
}

情况2：data是单一业务对象

{
  "code": 200,
  "message": "success",
  "data": {
    "name": "张三",
    "age": 28,
    "email": "zhangsan@example.com",
    "address": "北京市朝阳区"
  }
}

核心处理思路 #

对象结构的JSON在Dart中会被解析为Map<String, dynamic>，我们可以通过Map.entries.toList()将键值对转换为可遍历的列表，之后就能用你熟悉的ListView.builder来处理。

代码实现示例 #

1. 通用JSON解析方法

import 'dart:convert';

// 模拟网络请求返回的JSON字符串，实际开发中替换为真实接口数据
final jsonString = '''
{
  "code": 200,
  "message": "success",
  "data": {
    "userInfo": {"name": "张三", "age": 28, "email": "zhangsan@example.com"},
    "orderStats": {"totalOrders": 15, "pendingOrders": 3}
  }
}
''';

// 解析并返回data字段的对象
Map<String, dynamic> getBusinessData() {
  final Map<String, dynamic> jsonMap = jsonDecode(jsonString);
  return jsonMap['data'] as Map<String, dynamic>;
}

2. 情况1：展示多个子业务对象

用ExpansionTile折叠展示嵌套结构，递归处理子对象：

import 'package:flutter/material.dart';

class MultiObjectListView extends StatelessWidget {
  final Map<String, dynamic> businessData = getBusinessData();

  MultiObjectListView({super.key});

  @override
  Widget build(BuildContext context) {
    // 将对象键值对转为可遍历列表
    final List<MapEntry<String, dynamic>> dataEntries = businessData.entries.toList();

    return Scaffold(
      appBar: AppBar(title: const Text('业务数据展示')),
      body: ListView.builder(
        itemCount: dataEntries.length,
        itemBuilder: (context, index) {
          final entry = dataEntries[index];
          final String groupKey = entry.key;
          final dynamic groupValue = entry.value;

          return ExpansionTile(
            title: Text('*$groupKey*'),
            children: [
              // 递归处理嵌套对象
              if (groupValue is Map)
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: groupValue.entries.length,
                  itemBuilder: (context, subIndex) {
                    final subEntry = groupValue.entries.toList()[subIndex];
                    return ListTile(
                      title: Text(subEntry.key),
                      subtitle: Text(subEntry.value.toString()),
                    );
                  },
                )
              else
                ListTile(subtitle: Text(groupValue.toString())),
            ],
          );
        },
      ),
    );
  }
}

3. 情况2：展示单一业务对象的属性

直接遍历对象属性，用ListView.builder展示：

import 'package:flutter/material.dart';

class SingleObjectListView extends StatelessWidget {
  final Map<String, dynamic> userData = getBusinessData();

  SingleObjectListView({super.key});

  @override
  Widget build(BuildContext context) {
    final List<MapEntry<String, dynamic>> userEntries = userData.entries.toList();

    return Scaffold(
      appBar: AppBar(title: const Text('用户信息')),
      body: ListView.builder(
        itemCount: userEntries.length,
        itemBuilder: (context, index) {
          final entry = userEntries[index];
          return ListTile(
            title: Text(entry.key),
            subtitle: Text(entry.value.toString()),
          );
        },
      ),
    );
  }
}

关键说明 #

• Map.entries会返回对象的所有键值对，转为列表后就能适配ListView.builder的遍历需求
• 针对嵌套对象，可以通过类型判断递归处理，保证多层级数据都能展示
• 如果需要更规范的类型安全，可以用json_serializable生成模型类，将Map转为自定义对象后再处理

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