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

Question

我的数据库中有一个产品列表，如下所示： 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;
    } ```


 

Answer 1

我能够通过稍微更改逻辑和请求的数据结构并相应地添加小部件来解决它。在这里，如果我们添加我们的小部件而不是那些打印语句，我们可以实现上述问题中的输出。 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",
      "category": "Cosmetics",
      "sub_category": "Skin Care"
    },
    {
      "id": "3",
      "product_name": "Ponds ",
      "price": "250",
      "category": "Cosmetics",
      "sub_category": "Skin Care"
    },
    {
      "id": "4",
      "product_name": "Parachute",
      "price": "450",
      "category": "Cosmetics",
      "sub_category": "Body Care"
    },
    {
      "id": "5",
      "product_name": "Nivea Men",
      "price": "1900",
      "category": "Cosmetics",
      "sub_category": "Body Care"
    },
    {
      "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");
        }
      });
    });
  });