Flutter中如何在ListView Builder里从嵌套JSON数组获取图片？

问题场景 #

你提供的JSON存在语法错误，正确格式应为数组包含对象结构：

"data": [
    {
        "images": [
            {
                "id": "1",
                "imageUrl": "http....."
            },
            {
                "id": "2",
                "imageUrl": "http....."
            },
            {
                "id": "3",
                "imageUrl": "http....."
            }
        ]
    }
]

使用以下Dart代码尝试获取imageUrl并传入Image.Network时，触发错误：Invalid value ; only valid value is 0:1

for(var i=0; i<data[index].images.length;i++){
    List img = [data[index].images[i].imageUrl];

    // And using img in Image.Network
    Image.Network(img[i]);
    // gives error Invalid value ; only valid value is 0:1
}

错误原因 #

每次循环都会创建一个仅包含1个元素的Listimg，但你用循环变量i去访问img[i]：

• 当i=0时，img[0]是有效索引，对应List里的唯一元素
• 当i>=1时，img的长度仅为1，索引范围仅包含0，此时访问img[i]会触发索引越界错误

解决方法 #

方法1：直接使用获取到的imageUrl #

无需额外创建List，直接将获取到的imageUrl传入Image.Network：

for(var i=0; i<data[index].images.length;i++){
    String imageUrl = data[index].images[i].imageUrl;
    Image.Network(imageUrl);
}

方法2：提前初始化List并批量存储链接（如需保存所有图片地址） #

如果需要将所有imageUrl存入List统一管理，需在循环外初始化List，循环内添加元素，使用时调用正确索引：

// 循环外初始化空List
List<String> imgUrls = [];
for(var i=0; i<data[index].images.length;i++){
    imgUrls.add(data[index].images[i].imageUrl);
}

// 遍历List使用图片链接
for(var i=0; i<imgUrls.length;i++){
    Image.Network(imgUrls[i]);
}

内容的提问来源于stack exchange，提问作者Mohammad Mustafa Raza