将图像引用添加到List、Carousel和Firebase

Question

我不知道该怎么问这个问题，因此，请告诉我。

第一个页面显示不同项目的网格视图，当您单击其中一个项目时，它会将您带到该项目的描述页面。

在该描述页中，它使用futurebuilder，其中future:得到firebasefirestore.instance.collection......get()接着是builder:

if (snapshot.connectionState == ConnectionState.done) {
Map<String, dynamic> documentData = snapshot.data.data();
//Add images
// imgList.clear();
imgList.add(documentData['item_images'][0]);
imgList.add(documentData['item_images'][1]);
imgList.add(documentData['item_images'][2]);
return ListView(
children: [
CarouselWithIndicatorDemo(),
],);
}

CarouselWithIndicatorDemo()直接来自Dart-dev的carousel_slider示例。

检索数据非常好，转盘显示imglist的所有3个图像(如上所示(。

但是当我回到上一页点击另一个项目时，转盘中的图像不会更新。我尝试了imgList.removeAt(0)3次以清除dispose:中的列表

@override
void dispose() {
imgList.removeAt(0);
imgList.removeAt(0);
imgList.removeAt(0);
super.dispose();
}

但那没用。。。如何正确更新此列表？

*****************编辑*********************

在一个dart文件中，我传递以下信息：

Map<String, dynamic> documentData = snapshot.data.data();
List imageList = documentData['item_images'];

这在我的ListView( children:[内

ImageSwipe(imageList: imageList)  // instead of CarouselWithIndicatorDemo()

另一个飞镖文件：

class ImageSwipe extends StatefulWidget {
ImageSwipe({Key key, this.imageList}) : super(key: key);
final List imageList;
@override
_ImageSwipeState createState() => _ImageSwipeState();
}
class _ImageSwipeState extends State<ImageSwipe> {
int _selectedPage = 0;
@override
Widget build(BuildContext context) {
return Container(
height: 400.0,
child: Stack(
children: [
PageView(
onPageChanged: (value) {
setState(() {
_selectedPage = value;
});
},
children: [
for (var i = 0; i < widget.imageList.length; i++)
Container(
child: FadeInImage.assetNetwork(
placeholder: 'assets/missingImage.jpg',
image: widget
.imageList[i],
fit: BoxFit.cover,
),
),
],
),
Positioned(
bottom: 10.0,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (var i = 0; i < widget.imageList.length; i++)
AnimatedContainer(
duration: Duration(
milliseconds: 300,
),
curve: Curves.easeOutCubic,
margin: EdgeInsets.symmetric(horizontal: 5.0),
width: _selectedPage == i ? 36.0 : 10.0,
height: 10.0,
decoration: BoxDecoration(
color: AppColors.primaryColor,
borderRadius: BorderRadius.circular(
12.0,
),
),
)
],
),
),
]),
);
}
}

Answer 1

我已经通过使用这个解决了类似的问题：

final backgroundImages = ['signin_background.png','limpieza.jpg',/*'medicina.jpg',*/'plomero.jpg','profesor.jpg','veterinario.jpg'];

然后将其包装在动画切换器中，如下所示：

Stack(
children: [
AnimatedSwitcher(
duration: Duration(milliseconds: 800),
transitionBuilder: (Widget image, Animation<double> animation) {
return FadeTransition(opacity: animation, child: image,);
},
child: Image.asset('assets/'+backgroundImages[pos],
width: MediaQuery.of(context).size.width,
key: ValueKey(pos),
fit: BoxFit.fill,
),
),

因此，你必须首先从数据库中获取图像，或者将其存储在应用程序中。