将图像引用添加到 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();
  }

但这不起作用...如何正确更新此列表？

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

在一个 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,
    ),
  ),

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