firebase - 从 firebase cloud firestore 检索每个产品数据

Question

我已将两个产品详细信息上传到 Cloud Firestore，如下所示

我使用了一种上传每个产品并将其显示在网格图块中的方法。

这是我用来从云存储中检索数据的方法，当我打印文档的长度时成功显示“2”。

void getData() async {
    QuerySnapshot snapshot =
        await FirebaseFirestore.instance.collection('kollamProducts').get();
    snapshot.docs.forEach((document) {
      category = document['category'];
      id = document['id'];
      name = document['name'];
      shop = document['shop'];
      quantity = document['quantity'];
      images = List.from(document['images']);
      sizes = List.from(document['sizes']);
    });

    if (snapshot.docs.length != 0) {
      setState(() {
        prodL = snapshot.docs.length;
      });
    }
  }

这是我创建的网格图块小部件。在此它使用另一个名为 Single Product 的小部件作为其 itemBuilder。

  Widget build(BuildContext context) {
    return GridView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: false,
      primary: false,
      itemCount: prodL,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemBuilder: (BuildContext context, int index) {
        return SingleProdc(
          product_name: name,
          product_picture: images[0],
          product_image1: images[1],
          product_image2: images[2],
          product_shop: shop,
        );
      },
    );
  }

单个 rpoduct 小部件将所有内容安排在卡片中，并在网格图块中显示产品。

class SingleProdc extends StatelessWidget {
  final product_name;
  final product_picture;
  final product_image1;
  final product_image2;
  final product_shop;

  SingleProdc(
      {this.product_name,
      this.product_picture,
      this.product_image1,
      this.product_image2,
      this.product_shop});
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
        tag: product_name,
        child: Material(
          borderRadius: BorderRadius.circular(50),
          child: InkWell(
            borderRadius: BorderRadius.circular(50),
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => ProductDetails(
                      product_detail_name: product_name,
                      product_detail_picture: product_picture,
                      product_detail_image1: product_image1,
                      product_detail_image2: product_image2,
                      product_detail_shop: product_shop,
                    ))),
            child: GridTile(
              header: Container(
                height: 30,
                color: Colors.black38,
                child: Center(
                    child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                    Text(
                      product_shop,
                      style: GoogleFonts.poppins(color: Colors.white),
                    ),
                  ],
                )),
              ),
              footer: Container(
                  height: 50,
                  color: Colors.black38,
                  child: Column(
                    children: [
                      Text(
                        product_name,
                        style: GoogleFonts.poppins(
                          color: Colors.white,
                          fontSize:
                              product_name.toString().length > 9 ? 10 : 15,
                        ),
                      ),
                      Text(
                        "\u{20B9} 500",
                        style: GoogleFonts.poppins(
                            color: Colors.white, fontSize: 15),
                      ),
                    ],
                  )),
              child: Image.network(
                product_picture,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

问题是当产品显示而不是显示两种不同的产品时，第一个被复制了..这不是我想要的.. snapshot.docs.length 说有 2 个产品..那么为什么第一个是正在复制..请帮帮我。

标签： firebaseflutter

Answer 1

实际上，错误在这里：

void getData() async {
    QuerySnapshot snapshot =
        await FirebaseFirestore.instance.collection('kollamProducts').get();
    snapshot.docs.forEach((document) {
      category = document['category'];
      id = document['id'];
      name = document['name'];
      shop = document['shop'];
      quantity = document['quantity'];
      images = List.from(document['images']);
      sizes = List.from(document['sizes']);
    });

    if (snapshot.docs.length != 0) {
      setState(() {
        prodL = snapshot.docs.length;
      });
    }
  }

您正在做的是将值分配给某个固定变量。你应该做的是返回一个列表：

Future<List<dynamic>> getData() async {
  List<dynamic> temp = List();
    QuerySnapshot snapshot =
        await FirebaseFirestore.instance.collection('kollamProducts').get();
    snapshot.docs.forEach((document) {
    temp.add(
    {
      category = document['category'];
      id = document['id'];
      name = document['name'];
      shop = document['shop'];
      quantity = document['quantity'];
      images = List.from(document['images']);
      sizes = List.from(document['sizes']);
    }
  );
});

    if (snapshot.docs.length != 0) {
      setState(() {
        prodL = snapshot.docs.length;
      });
    }
    return temp;
  }

现在，您可以使用列表中的项目来访问数据并显示小部件。