英文:
flutter Image provider: NetworkImage, Image key: NetworkImage
问题
我试图从从服务器获取数据的API中加载一个图像数组，然后将其放入水平的`ListView.builder`中。API返回的数据中，`profile_img`键包含一个嵌套的数组。以下是API返回的示例：
[
{
"id": "1",
"profile_img": [
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
],
"vendor_tax_check": "Registered",
"total_list": "Total bookings 3 in the next 8 days"
}
{
"id": "2",
"profile_img": [
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
],
"vendor_tax_check": "Registered",
"total_list": "Total bookings 13 in the next 30 days"
}
]
当我在ListView中实现时，我遇到了一个错误：`Image provider: NetworkImage("https://website.com/image1.png, https://website.com/image2.png", scale: 1.0)`，以及来自`profile_img`键的错误：`Image key: NetworkImage("https://website.com/image1.png, https://website.com/image2.png", scale: 1.0)`。
在一段时间里，我尝试添加了一个`index`，如 `Image.network(data[index]["profile_img"][index].toString())`，但它只显示了其中一张图片，另一张显示错误 `RangeError (index): Invalid value: Only valid value is 0: 1`。
请问是否有人能帮忙解决这个问题？
英文:
I am trying to load an array of images inside a horizontal ListView.builder from an API fetching data from the server. The API returns an array inside another with the key profile_img.Below is what the API return looks like:
[
{
"id": "1",
"profile_img": [
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
],
"vendor_tax_check": "Registered",
"total_list": "Total bookings 3 in the next 8 days"
}
{
"id": "2",
"profile_img": [
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
],
"vendor_tax_check": "Registered",
"total_list": "Total bookings 13 in the next 30 days"
}
]
I got an error
Image provider: NetworkImage("[https://website.com/image1.png, https://website.com/image2.png]", scale: 1.0)
Image key: NetworkImage("[https://website.com/image1.png, https://website.com/image2.png]", scale: 1.0)profile_img above when I implemented in listview as seen below:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
return Column(
child:children[
Text(data[index]['id']),
ListView.builder(scrollDirection: Axis.horizontal,
itemCount:data == null ? 0 :data[index]["profile_img"].length,
itemBuilder: (BuildContext context, int index) {
return Align(
alignment: Alignment.centerRight,
child:Container(
child:Image.network(data[index]["profile_img"].toString()),
));
},
),
]
);
},)
At one point, I tried to add an index like => Image.network(data[index]["profile_img"][index].toString() above but it only displays one of the images and the other shows error RangeError (index): Invalid value: Only valid value is 0: 1. Please can anyone kindly help on how to solve this?
答案1
得分: 1
以下是您要翻译的内容：
"The value for the key profile_img is :
[
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
]
To get the first image, you need to do : profile_img[0][0] and not profile_img[0] as it is an array in an array. You can then do profile_img[0][1] to get the second image etc.
You added that you tried with : Image.network(data[index]["profile_img"][index].toString(). But you forgot a [0] so it should be : Image.network(data[index]["profile_img"][0][index].toString().
I hope that can help
EDIT :
Here is a fixed code wrapping every image in an array into a column
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
return Column(children: [
Text(data[index]['id']),
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data[index]["profile_img"].length,
itemBuilder: (BuildContext context, int profileIndex) {
List<String> images = [];
for (int i = 0;
i < data[index]["profile_img"][profileIndex].length;
i++) {
images.add(data[index]["profile_img"][profileIndex][i]);
}
return Column(children: [
for (int i = 0; i < images.length; i++)
Align(
alignment: Alignment.centerRight,
child: Container(
child: Image.network(data[index]["profile_img"]
[profileIndex][i]
.toString()),
))
]);
},
),
]);
});"
希望对您有所帮助。
<details>
<summary>英文:</summary>
The value for the key `profile_img` is :
[
[
"https://website.com/image1.png",
"https://website.com/image2.png"
]
]
To get the first image, you need to do : `profile_img[0][0]` and not `profile_img[0]` as it is an array in an array. You can then do `profile_img[0][1]` to get the second image etc.
You added that you tried with : `Image.network(data[index]["profile_img"][index].toString()`. But you forgot a [0] so it should be : `Image.network(data[index]["profile_img"][0][index].toString()`.
I hope that can help
EDIT :
Here is a fixed code wrapping every image in an array into a column
```dart
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
return Column(children: [
Text(data[index]['id']),
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data[index]["profile_img"].length,
itemBuilder: (BuildContext context, int profileIndex) {
List<String> images = [];
for (int i = 0;
i < data[index]["profile_img"][profileIndex].length;
i++) {
images.add(data[index]["profile_img"][profileIndex][i]);
}
return Column(children: [
for (int i = 0; i < images.length; i++)
Align(
alignment: Alignment.centerRight,
child: Container(
child: Image.network(data[index]["profile_img"]
[profileIndex][i]
.toString()),
))
]);
},
),
]);
});
</details>
# 答案2
**得分**: 0
以下是您要求的代码部分的翻译：
```dart
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
// 添加如下部分
final item = data[index];
return Column(
child: children[
Text(data[index]['id']),
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : item["profile_img"].length,
itemBuilder: (BuildContext context, int index) {
final subItem = item['profile_img'][subIndex];
return Align(
alignment: Alignment.centerRight,
child: Container(
child: Image.network(subItem.toString()),
),
);
},
),
],
);
},
)
希望这有助于您解决问题！
英文:
So I finally solved this myself and feel I should post the solution here in case anyone faces a similar issue, below is my solution:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
// added below
final item = data[index];
return Column(
child:children[
Text(data[index]['id']),
ListView.builder(scrollDirection: Axis.horizontal,
itemCount:data == null ? 0 :item["profile_img"].length,
itemBuilder: (BuildContext context, int index) {
final subItem =
item['profile_img'][subIndex];
return Align(
alignment: Alignment.centerRight,
child:Container(
child:Image.network(subItem.toString()),
));
},
),
]
);
},)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论