如何在单个屏幕中按类别和子类别显示所有产品？

如何解决如何在单个屏幕中按类别和子类别显示所有产品？

我的数据库中有一个产品列表，如下所示： Database Structure

我希望输出如下： App output

我通过向 script.php 发送 http 请求来获取数据：

    $get_all_products = $conn->query("SELECT * FROM dummy_products_madurms");
    $products = array();

    while ($rowData = $get_all_products->fetch_assoc()) {
        $products[] = $rowData;
    }

    echo json_encode($products);
}

但是我如何动态实现输出？到目前为止，我已经对小部件进行了硬编码。而且我还尝试了某种输出方式，output error 但是类别和子类别如上图所示重复多次。这是我尝试的逻辑。任何帮助都会非常有帮助，因为我完全是 flutter 的初学者。提前致谢：

List<Widget> createContent() {
      List<Widget> contentall = [];
      double height = 0.0;
      List<Widget> content = [];
      categories.forEach((cat) {
        bool isThere = false;
        Widget container = CategoryTitle(title: cat);
        content.add(container);
        subCategories.forEach((subCat) {
          List<Widget> listCont = [];
          var isubCat = subCat;
          var sortedProdList = productList
              .where((element) => element.subCategory == isubCat)
              .toList();
          print(sortedProdList.length);
          sortedProdList.forEach((prod) {
            listCont.add(SingleListProduct(imageUrl: prod.url));
            isThere = true;
          });
          if (isThere) {
            Widget subCont = SubCategoryTitle(title: subCat);
            content.add(subCont);
            isThere = false;
            Widget listViewContainer = ListViewContainer(childs: listCont);
            content.add(listViewContainer);
            listCont = [];
          }
          height += 0.15;
          Widget cont1 = DragCard(
            height: height,count: content.length,content: content,);
          contentall.add(cont1);
        });
      });

      return contentall;
    } ```


 

解决方法

我能够通过稍微更改逻辑和请求的数据结构并相应地添加小部件来解决它。在这里，如果我们添加我们的小部件而不是那些打印语句，我们可以实现上述问题中的输出。 DartPad example
No.1 - 创建类别和子类别地图：-

  List<Map<String,Object>> cat = [
    {
      "category": "Cosmetics","subCategory": ["Skin Care","Body Care"],},{
      "category": "Food Products","subCategory": ["Masala Products"],}
  ];

No.2 - 创建虚拟产品列表：-

  List<Map<String,Object>> products = [
    {
      "id": "1","product_name": "Fair and Lovely","price": "200","category": "Cosmetics","sub_category": "Skin Care"
    },{
      "id": "2","product_name": "Lifeboy","price": "300",{
      "id": "3","product_name": "Ponds ","price": "250",{
      "id": "4","product_name": "Parachute","price": "450","sub_category": "Body Care"
    },{
      "id": "5","product_name": "Nivea Men","price": "1900",{
      "id": "6","product_name": "Coriander Powder","price": "2200","category": "Food Products","sub_category": "Masala Products"
    }
  ];

No.3 - 创建一个循环，它将按类别自动显示提供的小部件：-

category.forEach((singleCat) {
    var categ = singleCat["category"];
    List<String> subCat = singleCat["subCategory"];
    print("Category is $categ and \n");
    subCat.forEach((sc) {
      var curSc = sc;
      print("  Sub Category is $curSc and \n");
      products.forEach((prod) {
        if (prod["category"] == categ && prod["sub_category"] == curSc) {
          print(
              "    ${prod["product_name"]} and product price is ${prod["price"]}\n");
        }
      });
    });
  });