将图像引用添加到 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 开发 carousel_slider 示例。

检索数据工作正常，轮播显示来自 imglist（见上文）的所有 3 个图像。

但是当我返回上一页点击另一个项目时，轮播中的图像没有更新。我尝试 imgList.removeAt(0) 3 次来清除 dispose:

中的列表

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

但这没有用...我怎样才能正确更新此列表？

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

在飞镖文件中，我传递了以下信息：

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,
    ),
  ),

因此您必须首先从您的数据库中获取图像或将它们存储在应用程序中。

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

Add image reference to List and Carousel and Firebase

list

carousel

firebase

flutter