带有颤动类别标题的列表视图

Question

我有这样的结构 现在我想在一个屏幕上显示按类别（咖啡口味和茶）过滤的所有产品。

List<CategoryModel> categories = [
    CategoryModel(
      id: "24568638763824686845366",
      categoryName: "Coffee Flavour",
    ),
    CategoryModel(
      id: "24568638763824686845367",
      categoryName: "TEA",
    ),
  ];

  List<ProductModel> products = [
    ProductModel(
        id: "24568638763824686845366",
        title: "Trà sữa Socola (M)",
        desc: "Trà ô long kết hợp Socola...",
        price: 40000,
        status: 1,
        imgUrl:
            "https://foodgen.vn/wp-content/uploads/2019/10/tra%CC%80-s%C6%B0%CC%83a-socola-e1572782061432.jpg"),
    ProductModel(
        id: "24568638763824686845366",
        title: "Trà hạt phỉ Macchiato (L)",
        desc: "Món này tuỳ vào bên bán hạt",
        price: 55000,
        status: 1,
        imgUrl:
            "https://product.hstatic.net/1000075078/product/tra-den-macchiato_facfdd980ca547be93974edb7f16d3b7_master.jpg"),
    ProductModel(
        id: "24568638763824686845366",
        title: "Trà sữa Socola (M)",
        desc: "Trà ô long kết hợp Socola...",
        price: 40000,
        status: 0,
        imgUrl: "https://foodgen.vn/wp-content/uploads/2019/10/tra%CC%80-s%C6%B0%CC%83a-socola-e1572782061432.jpg"),
    ProductModel(
        id: "24568638763824686845367",
        title: "Cà phê sữa đá Thức tỉnh ngày mới!",
        desc: "",
        price: 40000,
        status: 1,
        imgUrl: "https://foodgen.vn/wp-content/uploads/2019/10/tra%CC%80-s%C6%B0%CC%83a-socola-e1572782061432.jpg"),
    ProductModel(
        id: "24568638763824686845367",
        title: "Cappuchino nóng / đá",
        desc: "",
        price: 35000,
        status: 0,
        imgUrl: "https://foodgen.vn/wp-content/uploads/2019/10/tra%CC%80-s%C6%B0%CC%83a-socola-e1572782061432.jpg"),
    ProductModel(
        id: "24568638763824686845366",
        title: "Trà sữa Socola (M)",
        desc: "Trà ô long kết hợp Socola...",
        price: 40000,
        status: 1,
        imgUrl: "https://foodgen.vn/wp-content/uploads/2019/10/tra%CC%80-s%C6%B0%CC%83a-socola-e1572782061432.jpg"),
  ];

应该是这样的：

茶

产品 A

产品 B

咖啡味

产品 C

产品设计

我该怎么做？感谢您的帮助！

Answer 1

List<ProductModel> get coffeProducts =>
      products.where((product) => product.id == categories.first.id).toList();

  List<ProductModel> get teaProducts =>
      products.where((product) => product.id == categories.last.id).toList();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Coffee'),
        ListView.builder(
          shrinkWrap: true,
          itemCount: coffeProducts.length,
          itemBuilder: (context, index) {
            return Text(coffeProducts[index].title ?? '');
          },
        ),
        Text('Tea'),
        ListView.builder(
          shrinkWrap: true,
          itemCount: teaProducts.length,
          itemBuilder: (context, index) {
            return Text(teaProducts[index].title ?? '');
          },
        ),
      ],
    );
  }

更新

如果不知道类别列表长度：

1. 创建一个数据结构来存储包含自己产品的类别（您也可以使用简单的 Map）。

class CategoryContent {
  final CategoryModel category;
  final List<ProductModel> products;

  CategoryContent({
    this.category,
    this.products,
  });
}

2. 重构代码：

/*List<ProductModel> get coffeProducts =>
      products.where((product) => product.id == categories.first.id).toList();

  List<ProductModel> get teaProducts =>
      products.where((product) => product.id == categories.last.id).toList();*/

  List<CategoryContent> get categoryContents => categories
      .map((category) => CategoryContent(
          category: category,
          products:
              products.where((product) => product.id == category.id).toList()))
      .toList();

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      itemCount: categoryContents.length,
      itemBuilder: (context, index) {
        return Column(
          children: [
            Text(categoryContents[index].category.categoryName),
            ...categoryContents[index].products.map((product) {
              return Text(product.title);
            }),
          ],
        );
      },
    );
  }