J'utilise le package "Carousel Pro" pour implémenter un carrousel dans mon écran, dans cette classe Carousel il faut une liste d'images,
La syntaxe de la classe Carousel est
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")
],
)
J'ai eu une liste d'urls d'image réseau qui est analysée à partir des données json, Comment puis-je ajouter la liste d'URL aux «images» enfants de la classe Carousel.
4 Réponses :
Cette meilleure façon serait de créer une liste / un tableau de vos images réseau et de les lister comme telles
ListView _buildList(context) {
return ListView.builder(
itemCount: imageList.length,
itemBuilder: (context, int) {
return Carousel(
images: [
NetworkImage(imageList[int]),
ExactAssetImage("assets/images/LaunchImage.jpg")
],
);
},
);
}
Ou, utilisez un ListView.builder pour parcourir votre liste et utilisez l'index <- ce serait idéal si vous avez une liste qui varie ou peut changer pendant un état d'affichage.
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")
],
)
Comment puis-je parcourir ce carrousel (images: [NetworkImage (imageList [0]), NetworkImage (imageList [1]), NetworkImage (imageList [2]), ExactAssetImage ("assets / images / LaunchImage.jpg")],) , le nombre d'urls variera
Impossible d'utiliser un ListView.builder
Sur la page du package, le développeur a utilisé l'exemple en tant que Carousel tant qu'enfant d'un SizedBox . Essayez à nouveau d'utiliser ListView et renvoyez cette fois la SizedBox .
Vous pouvez utiliser map pour créer une liste de NetworkImage:
images: imageURLs.map((String url) {
return new NetworkImage(url));
}).toList(),
with imageURLs est l'URL de la liste de vos images
Ce code ne fonctionne pas non plus, je pense que c'est à cause de ce widget d'utiliser un autre widget.
Désolé, j'ai changé le widget. Maintenant, je ne peux pas vérifier l'erreur.
C'est facile, il suffit de créer une liste NetworkImage et de l'utiliser directement comme ceci:
Carousel( images: images )
Et dans votre carrousel devrait être comme ça
List<NetworkImage> images = List<NetworkImage>();
images.add(NetworkImage('url1');
images.add(NetworkImage('url2');
J'espère que cela a été utile
Tout d'abord, créez une liste de NetworkImage:
Carousel ( images: productAssets, )
Ensuite, vous devrez créer une fonction qui vous permettra d'ajouter la liste des chaînes d'images réseau à votre productImage List.
productImages: productAssets(['http://www.image1.com', 'http://www.image2.com']);
La fonction ci-dessus prend la liste des chaînes d'images et renvoie une liste des images réseau.
Ce que vous devez faire maintenant est d'utiliser la liste (productAssets) pour analyser la chaîne d'URL d'images réseau afin de les ajouter à vos images de carrousel.
static List<NetworkImage> productAssets(List<String> images) {
List<NetworkImage> asset = List<NetworkImage>();
for (String item in images) {
asset.add(NetworkImage(item));
}
return asset;
}
Il ne vous reste plus qu'à analyser les images du produit dans votre widget Carousel
List<NetworkImage> productImage = [];