Question

我使用“ 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数据中解析出来的网络图片网址列表，我如何将网址列表添加到Carousel类的子“图像”中。

Answer 1

创建一个NetworkImage列表并像这样直接使用它很容易：

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

在旋转木马中应该是这样

Carousel(
images: images
)

我希望这会有所帮助

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

Answer 3

您可以使用map列出NetworkImage：

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

带有imageURLs是图像的列表URL

Answer 4

首先创建一个NetworkImage列表：

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']);

您现在要做的就是解析“轮播”窗口小部件中的productImages

Carousel (
   images: productAssets,
)

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

4 个答案: