flutter图片提供者：NetworkImage，图像密钥：网络形象

1cosmwyk 于 2023-06-30 发布在 Flutter

关注(0)|答案(2)|浏览(135)

我试图从服务器获取数据的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中实现时，我从上面的键profile_img得到了一个错误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)，如下所示：

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()),
                                                            ));
                                                      },
                                                    ),
                                                                

                                    ]
                                        );
                                        },)

有一次，我试图添加一个index，如上面的=> Image.network(data[index]["profile_img"][index].toString()，但它只显示其中一个图像，另一个显示错误RangeError (index): Invalid value: Only valid value is 0: 1。请问有没有人可以帮忙解决这个问题？

flutter

来源：https://stackoverflow.com/questions/76564646/flutter-image-provider-networkimage-image-key-networkimage

2条答案

按热度按时间

wkyowqbh1#

关键字profile_img的值为：

[
        [
            "https://website.com/image1.png",
            "https://website.com/image2.png"
        ]
    ]

要获得第一个图像，您需要执行以下操作：profile_img[0][0]而不是profile_img[0]，因为它是数组中的数组。然后，您可以执行profile_img[0][1]以获得第二个图像等。
你补充说，你尝试了：Image.network(data[index]["profile_img"][index].toString()。但您忘记了一个[0]，因此应该是：Image.network(data[index]["profile_img"][0][index].toString()。
希望能帮上忙
编辑：
这里是一个固定的代码 Package 成一列数组中的每个图像

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()),
                        ))
                ]);
              },
            ),
          ]);
        });

赞(0）回复(0）举报 2023-06-30

abithluo2#

所以我终于自己解决了这个问题，我觉得我应该在这里发布解决方案，以防有人遇到类似的问题，下面是我的解决方案：

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()),
                                                            ));
                                                      },
                                                    ),
                                                                

                                    ]
                                        );
                                        },)

赞(0）回复(0）举报 2023-06-30

我来回答

flutter图片提供者：NetworkImage，图像密钥：网络形象

2条答案

相关问题

热门标签

最新问答