Question

编辑：

主页-我正在从Firebase集合中获取字符串列表。然后，我想打电话给Firestore存储并获取可下载的图像链接，并将其存储在一个列表中，该列表将传递到第2页。下面的代码是我如何获取可下载的链接。

Future<List<String>> test(List images) async{
  List<String> listOfImages = List<String>();
  for(int i = 0; i < images.length; i++){
     final ref = FirebaseStorage.instance.ref().child(images[i]);
     var url = await ref.getDownloadURL();
     listOfImages.add(url);
  }
  return listOfImages;
}

然后我以以下方式传递图片列表

Navigator.push(
  context,
  MaterialPageRoute(
     builder: (context) => CarDetailScreen(
        carImages: test( car['images'])
  )),
);

第2页-我正在接收Future>，我想将其转换为列表

List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
  result.add(handler(i, list[i]));
}

return result;
}

new CarouselSlider(
  items: ***["This is where I need a List"]***.map((url) {
    return new Container(
        margin: new EdgeInsets.all(5.0),
        child: 
        new GestureDetector(
          onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => ViewCarImages(
                                  carImages: _getImages(snapshot))),
                        );
                      },
          child:
        new ClipRRect(
            borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
            child: 
            new Image.network(
              url,
              fit: BoxFit.cover,
              width: 1000.0,
            )
            )
            )
            );
  }).toList(),
  viewportFraction: 0.9,
  aspectRatio: 2.0,
  autoPlay: false,
)

Answer 1

您可以仅返回小部件列表，如下所示：

    Future<List<Widget>> test(List images) async{   
       List<Widget> listOfImages = List<Widget>();
       for(int i = 0; i < images.length; i++){ 
          final ref = FirebaseStorage.instance.ref().child(images[i]); 
          var url = await ref.getDownloadURL(); 
          listOfImages.add(Image.network(url));
       }
      return listOfImages; 
    }

Answer 2

下面的代码将解决您的问题。在下面编写的carouselSlide类（检查项目变量）中，您需要按照以下过程在carousel中处理Future对象

@override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text("some text",
              style: TextStyle(
                  fontWeight: FontWeight.normal,
                  color: Colors.black,
                  fontSize: 16.0)),
          centerTitle: false,
          actions: <Widget>[
            IconButton(
              tooltip: 'Search something',
              icon: Icon(
                Icons.search,
                color: SharedColor().sapphireDarkBlue,
              ),
              onPressed: () async {
                var selected = await showSearch<int>(
                    context: context, delegate: _delegate);
                if (selected != null && selected != _lastIntegerSelected) {
                  setState(() {
                   //pass the data from searchfield query to here
                  });
                }
              },
            ),
          ],
          automaticallyImplyLeading: false,
        ),
        body: _carouselBuild(),

    );
  }

  FutureBuilder<caraouselImage> _carouselBuild() {
    return FutureBuilder<caraouselImage>(
        future: ImageRestApiManager().caraouselImage(myEmail),
        builder: (context, AsyncSnapshot<caraouselImage> snapshot) {
          if (snapshot.hasData) {

            return CarouselSlider(
                items: snapshot.data.collection.map((i) {
                  return Builder(builder: (BuildContext context) {
                    return Container(
                      margin: EdgeInsets.all(5.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        child: Stack(children: <Widget>[
                          Image.network(i.imageurl,
                              fit: BoxFit.cover, width: 1000.0),
                          Positioned(
                            bottom: 0.0,
                            left: 0.0,
                            right: 0.0,
                            child: Container(
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromARGB(200, 0, 0, 0),
                                    Color.fromARGB(0, 0, 0, 0)
                                  ],
                                  begin: Alignment.bottomCenter,
                                  end: Alignment.topCenter,
                                ),
                              ),
                              padding: EdgeInsets.symmetric(
                                  vertical: 10.0, horizontal: 20.0),
                              child: Text(
                                _currentCookieSelected.toString(),
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ]),
                      ),
                    );
                  });
                }).toList(),
                autoPlay: false,
                enlargeCenterPage: true,
                viewportFraction: 0.9,
                aspectRatio: 2.0,
                onPageChanged: (index) {
                  setState(() {
                    _currentImageSelected = snapshot.data.collection[index].id;
                  });
                });
          } else {
            return CircularProgressIndicator();
          }
        });
  }
}





I solved using below youtube tutorial

https://www.youtube.com/watch?v=xBLtPDHvT44

Answer 3

FutureBuilder应该会帮助您。在这里，我将您的CarouselSlider包裹在FutureBuilder中，并将future属性设置为您的carImages Future。准备好字符串列表后，FutureBuilder将通过其builder方法创建CarouselSlider，然后所有列表项将出现：

    return FutureBuilder<List<String>>(
      future: carImages,
      initialData: [],
      builder: (context, snapshot) {
        return new CarouselSlider(
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          autoPlay: false,
          items: snapshot.data.map((url) {
            return new Container(
              margin: new EdgeInsets.all(5.0),
              child: 
              new GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ViewCarImages(
                      carImages: _getImages(snapshot))),
                  );
                },
                child: new ClipRRect(
                  borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                  child: new Image.network(
                    url,
                    fit: BoxFit.cover,
                    width: 1000.0,
                  )
                )
              )
            );
          }).toList(),
        );
      }
    );

有没有办法将Future <list <string >>转换为List <dynamic>？

3 个答案: