如何在 flutter 中的垂直列表視圖中創建水平列表視圖

Question

這是我的數據庫結構。 類別是零食和飲料的父節點。

這是我定義列表的代碼：

  List<CategoriesOnly> categoriesOnlyList =[];
  List<CategoryItems> categoryItemList = [];

這是將數據存儲到列表中的代碼：

 var categoryName = FirebaseDatabase.instance.reference().child('Categories').once()
    .then((DataSnapshot snapShot){
      Map <dynamic, dynamic> values = snapShot.value;
      values.forEach((key1,values){
        var categoryItem = FirebaseDatabase.instance.reference().child('Categories').child(key1).once()
        .then((DataSnapshot dataSnapshot){
          print(key1);
          CategoriesOnly categoriesOnly = new CategoriesOnly(
            key1
          );
          categoriesOnlyList.add(categoriesOnly);--------Storing Category Name(i.e. Snacks and Beverages)
          var key = dataSnapshot.value.keys;
          for(var i in key){
            CategoryItems categoryItems = new CategoryItems(
                dataSnapshot.value[i]['MarketPrice'],
                dataSnapshot.value[i]['Name'],
                dataSnapshot.value[i]['OurPrice'],
                dataSnapshot.value[i]['TotalDiscount'],
                dataSnapshot.value[i]['Weight']
            );
            categoryItemList.add(categoryItems);-----Storing all their respective item.
          }
          
        });

        });
    });

下面是在 Vertical ListBuilder 中打印 Category Name 並將它們的 Item 打印到 Horizontal ListBuilder 中的代碼：

  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black, //or set color with: Color(0xFF0000FF)
    ));
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(

        child:  ListView.builder(
          itemCount: categoriesOnlyList.length,
          itemBuilder: (context, index) =>
              Column(children: [
                Text(categoriesOnlyList[index].Name),
                Container(
                  height: 100,
                  child:
                  ListView.builder(itemCount: categoryItemList.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) => Text(categoryItemList[index].Name)),
                ),

              ]),
        )
      ),
    );
  }
}

這是我得到的：

在每個類別名稱中，我得到了兩個類別的所有項目（即在零食里面，我得到了零食和飲料的所有項目，飲料也是如此）。 但我希望我的代碼僅顯示屬於其父類別名稱的那些項目。

Answer 1

在您的 CategoryItem class 中也保存類別名稱。 我不知道你為什么不這樣做。 像這樣：

CategoryItems categoryItems = new CategoryItems(
                key, // your category type 
                dataSnapshot.value[i]['MarketPrice'],
                dataSnapshot.value[i]['Name'],
                dataSnapshot.value[i]['OurPrice'],
                dataSnapshot.value[i]['TotalDiscount'],
                dataSnapshot.value[i]['Weight']
            );

當您使用 builder 構建 listView 時，請執行以下操作：

return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(

        child:  ListView.builder(
          itemCount: categoriesOnlyList.length,
          itemBuilder: (context, index) {
              List abc = categoryItemList.where((item) => item.key == categoriesOnlyList[index]).toList();
              return Column(children: [
                Text(categoriesOnlyList[index].Name),
                Container(
                  height: 100,
                  child:
                  ListView.builder(
                     itemBuilder: (c, i) {
                         return Text(abc[i].Name);
                     },
                     itemCount: abc.length,
                 ),

              ]);
          }
        )
      ),
    );