dart - 使用 FutureBuilder 创建轮播

Question

我将图像存储在 Firestore 文档中，并希望使用 FutureBuilder 加载它们。这是我到目前为止所做的:

     Future getCarouselWidget() async {
        var firestore = Firestore.instance;
        QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
        return qn.documents;
      }

 Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          future: getCarouselWidget(),
          builder: (context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return new CircularProgressIndicator(); 
            } else {
              if (snapshot.hasError) {
                return new Text("fetch error");
              } else {
                return new Container(
                    height: 250.0,
                    child: new Carousel(
                      boxFit: BoxFit.cover,
                      images: [NetworkImage(snapshot.data[0].data["img_2"])],
                      autoplay: false,
                      dotSize: 4.0,
                      indicatorBgPadding: 4.0,
                      animationCurve: Curves.fastOutSlowIn,
                      animationDuration: Duration(milliseconds: 1000),
                    ));
              }
            }
          }),
    );
  }'

使用上面的代码，我可以毫无错误地显示图像。但是，我不知道如何遍历快照数据来显示图像列表。

下面是我的 firestore 结构:

Answer 1

这就是解决方案。基本上，我遍历文档快照并将结果保存在列表中。然后，我将列表设置为图像。

 Widget build(BuildContext context) {
    var idx = 1;
    return Container(
      child: FutureBuilder(
          future: getCarouselWidget(),
          builder: (context, AsyncSnapshot snapshot) {
            List<NetworkImage> list = new List<NetworkImage>();
            if (snapshot.connectionState == ConnectionState.waiting) {
              return new CircularProgressIndicator(); 
            } else {
              if (snapshot.hasError) {
                return new Text("fetch error");
              } else {

                //Create for loop and store the urls in the list 
                for(int i = 0; i < snapshot.data[0].data.length; i++ ) {
                  debugPrint("Index is " + idx.toString());
                  list.add(NetworkImage(snapshot.data[0].data["img_"+idx.toString()]));
                  idx++;
                }
                return new Container(
                    height: 250.0,
                    child: new Carousel(
                      boxFit: BoxFit.cover,
                      images: list,   <== Set the list here 
                      autoplay: true,
                      dotSize: 4.0,
                      indicatorBgPadding: 4.0,
                      animationCurve: Curves.fastOutSlowIn,
                      animationDuration: Duration(milliseconds: 1000),
                    ));
              }
            }
          }),
    );