Flutter中如何访问无键二维JSON数组（嵌套列表）

步骤1：解析JSON数据 #

先把获取到的JSON字符串转换成Dart可操作对象。你的JSON外层是数组，内部对象的data字段是无键二维字符串数组，解析时需要明确类型转换：

// 假设jsonString是你的原始JSON字符串
final List<dynamic> jsonList = jsonDecode(jsonString);
// 取数组第一个对象（匹配你的JSON结构）
final Map<String, dynamic> userData = jsonList[0];
// 提取data字段，转成二维字符串列表
final List<List<String>> chapters = (userData['data'] as List<dynamic>)
    .map((innerList) => List<String>.from(innerList))
    .toList();

步骤2：在Widget中展示数据 #

用嵌套组件逐层渲染二维数组内容，以下是完整示例代码，用ListView.builder配合Card+Column实现清晰布局：

class ChapterDisplay extends StatefulWidget {
  const ChapterDisplay({super.key});

  @override
  State<ChapterDisplay> createState() => _ChapterDisplayState();
}

class _ChapterDisplayState extends State<ChapterDisplay> {
  late List<List<String>> chapters;

  @override
  void initState() {
    super.initState();
    // 模拟JSON解析流程
    final String jsonString = '''
    [
      {
        "username": "gn",
        "data": [
          [
            "1 cap 1 libro 1",
            "2 cap 2 libro 1"
          ],
          [
            "1 cap 2 del libro 1",
            "2 cap 2 del libro 1"
          ],
          [
            "1 cap 3 del libro 1",
            "2 cap 3 del libro 1"
          ]
        ],
        "email": "Gana"
      }
    ]
    ''';
    final List<dynamic> jsonList = jsonDecode(jsonString);
    final Map<String, dynamic> userData = jsonList[0];
    chapters = (userData['data'] as List<dynamic>)
        .map((innerList) => List<String>.from(innerList))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Libro Capítulos')),
      body: ListView.builder(
        itemCount: chapters.length,
        itemBuilder: (context, index) {
          final List<String> chapterItems = chapters[index];
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: chapterItems
                    .map((item) => Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4),
                          child: Text(item, style: const TextStyle(fontSize: 16)),
                        ))
                    .toList(),
              ),
            ),
          );
        },
      ),
    );
  }
}

核心说明 #

• 类型转换是关键：jsonDecode返回dynamic类型，必须将data字段先转成List<dynamic>，再映射为List<String>的二维列表，避免类型错误。
• 布局灵活调整：如果子数组内容过长，可将内层Column替换为ListView并配合Expanded，防止屏幕溢出。

内容的提问来源于stack exchange，提问作者Edgar Joel Perez