Flutter中ListView.Builder解析嵌套JSON数组仅显示单条ID如何解决

问题原因 #

你当前代码的核心问题是复用了外层列表的index去取嵌套的tablePhotos数组元素：

• 外层ListView.builder遍历的是tables数组，index是tables数组的下标
• 你直接用data[index].tablePhotos![index]相当于：tables索引为0的项取tablePhotos的第0个元素，tables索引为1的项取tablePhotos的第1个元素，自然只能拿到id为1的内容，tablePhotos里剩下的元素完全没有遍历展示

修正代码 #

首先注意你入参的类型写错了，应该是List<TableGenerateTables>不是List<TablesTables>，修正后的代码如下：

Widget showTable(List<TableGenerateTables> data) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: data.length,
    itemBuilder: (BuildContext context, int index) {
      // 先拿到当前table对应的所有照片
      final currentTablePhotos = data[index].tablePhotos ?? [];
      return Card(
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 可选：展示当前table的id
              Text("表格ID：${data[index].id}"),
              const SizedBox(height: 8),
              const Text("关联照片ID："),
              // 遍历所有tablePhotos生成Text组件
              ...currentTablePhotos.map((photo) {
                return Text("id: ${photo?.id ?? ''}");
              }).toList()
            ],
          ),
        ),
      );
    }
  );
}

修改说明 #

• 修正了入参类型错误，和你定义的Model类保持一致
• 提前取出当前table项对应的所有照片列表，避免重复取值
• 用扩展运算符...把遍历tablePhotos生成的所有Text组件插入到Column的children里，即可展示当前table下所有的照片ID
• 增加了判空处理，避免空值异常

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