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

Question

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

我想要 output 如下： App output

我通过向脚本发送 http 请求来获取数据。php：

    $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 呢？ 到目前为止，我已经对小部件进行了硬编码。 我还尝试了一些输出方式， output 错误，但类别和子类别重复多次，如上图所示。 这是我尝试过的逻辑。 任何帮助都会非常有帮助，因为我完全是 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

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

  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");
        }
      });
    });
  });