如何在 Flutter 中创建网络图像列表

Posted 2023-02-23

【中文标题】如何在 Flutter 中创建网络图像列表

【英文标题】：How to create a list of Network images in Flutter

【发布时间】：2020-02-12 13:29:45

【问题描述】：

我使用“Carousel Pro”包在我的屏幕中实现一个轮播，在这个 Carousel 类中它需要一个图像列表，

Carousel 类的语法是

Carousel(
    images: [
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
      ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  )

我有一个从 json 数据解析的网络图像 url 列表， 如何将 url 列表添加到 Carousel 类的子“图像”中。

【参考方案1】：

只需创建一个 NetworkImage List 并像这样直接使用它就可以了：

List<NetworkImage> images = List<NetworkImage>();
images.add(NetworkImage('url1');
images.add(NetworkImage('url2');

在你的轮播中应该是这样的

Carousel(
images: images
)

希望对你有帮助

【参考方案2】：

最好的方法是创建一个网络图像的列表/数组，然后将它们列出来

List imageList = (http://cdn-images-1, http://cdn-images-2, http://cdn-images-3,)

Carousel(
    images: [
      NetworkImage(imageList[0]),
      NetworkImage(imageList[1]),
      NetworkImage(imageList[2]),
      ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  )

或者，使用 ListView.builder 遍历您的列表并使用索引

ListView _buildList(context) 
    return ListView.builder(
                itemCount: imageList.length,
                itemBuilder: (context, int) 
            return Carousel(
                       images: [
                            NetworkImage(imageList[int]),
                            ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  );
      ,
    );
  

【讨论】：

我怎样才能遍历这个轮播（图像：[ NetworkImage(imageList[0]), NetworkImage(imageList[1]), NetworkImage(imageList[2]), ExactAssetImage("assets/images/ LaunchImage.jpg") ], ) , url 的数量会有所不同

不能使用 ListView.builder

在包页面上，开发人员将示例用作Carousel 作为SizedBox 的子代。再次尝试使用 ListView，这次返回 SizedBox。

【参考方案3】：

您可以使用map来制作NetworkImage的列表：

images: imageURLs.map((String url) 
  return new NetworkImage(url));
).toList(),

imageURLs 是图片的列表 url

【讨论】：

这段代码也不起作用，我认为是因为那个小部件使用了另一个小部件。

抱歉，我更改了小部件。现在我无法检查错误。

【参考方案4】：

首先创建一个NetworkImage的List：

List<NetworkImage> productImage = [];

然后您需要创建一个函数，使您能够将网络图像字符串列表添加到您的 productImage 列表中。

static List<NetworkImage> productAssets(List<String> images) 
    List<NetworkImage> asset = List<NetworkImage>();

    for (String item in images) 
      asset.add(NetworkImage(item));
    

    return asset;
  

上面的函数接受图像字符串列表并返回网络图像列表。

您现在需要做的是使用列表 (productAssets) 解析网络图像 URL 的字符串，以将它们添加到您的轮播图像中。

productImages: productAssets(['http://www.image1.com', 'http://www.image2.com']);

您现在要做的就是解析 Carousel Widget 中的 productImages

Carousel (
   images: productAssets,
)