如何在flutter中显示嵌套的扩展块列表(类别与子类别)？

我试图建立一个扩展瓦片的列表，每个扩展瓦片都有一个孩子的列表，但每个孩子都有一个子类别。
假设你不知道嵌套子类别的长度，如何NOT HARD CODE在以下对象中每次迭代…

{
        "id": 53,
        "parent_id": null,
        "slug": "bazar",
        "name": "BAZAR",
        "is_searchable": true,
        "shop_in_shop": false,
        "logo": null,
        "banner": null,
        "shop_banner": null,
        "sub_categories": []
    },
    {
        "id": 196,
        "parent_id": null,
        "slug": "cosmetics",
        "name": "COSMETICS",
        "is_searchable": true,
        "shop_in_shop": false,
        "logo": null,
        "banner": null,
        "shop_banner": null,
        "sub_categories": [
            {
                "id": 170,
                "parent_id": 196,
                "slug": "make-up",
                "name": "Make Up",
                "is_searchable": true,
                "shop_in_shop": false,
                "logo": null,
                "banner": null,
                "shop_banner": null,
                "sub_categories": [
                    {
                        "id": 171,
                        "parent_id": 170,
                        "slug": "make-up-eyes",
                        "name": "Eyes",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": [
                            {
                                "id": 214,
                                "parent_id": 171,
                                "slug": "mascara",
                                "name": "Mascara & Brows",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            {
                                "id": 215,
                                "parent_id": 171,
                                "slug": "eyeshadow",
                                "name": "Eyeshadow",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            {
                                "id": 216,
                                "parent_id": 171,
                                "slug": "eyeliner",
                                "name": "Eyeliner",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            {
                                "id": 217,
                                "parent_id": 171,
                                "slug": "falselashes",
                                "name": "Falselashes",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            }
                        ]
                    },
                    {
                        "id": 172,
                        "parent_id": 170,
                        "slug": "make-up-face",
                        "name": "Face",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": [
                            {
                                "id": 219,
                                "parent_id": 172,
                                "slug": "foundation",
                                "name": "Foundation",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            {
                                "id": 220,
                                "parent_id": 172,
                                "slug": "concealer-corrector",
                                "name": "Concealer & Corrector",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                        
                            {
                                "id": 226,
                                "parent_id": 172,
                                "slug": "bronzer-blush",
                                "name": "Bronzer & Blush",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            {
                                "id": 227,
                                "parent_id": 172,
                                "slug": "compact-loose-powder",
                                "name": "Compact & Loose Powder",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            }
                        ]
                    },
                    {
                        "id": 174,
                        "parent_id": 170,
                        "slug": "make-up-lips",
                        "name": "Lips",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": [
                            {
                                "id": 228,
                                "parent_id": 174,
                                "slug": "lipstick",
                                "name": "Lipstick",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            },
                            
                            {
                                "id": 230,
                                "parent_id": 174,
                                "slug": "lip-gloss-lip-balm",
                                "name": "Lip Gloss & Lip Balm",
                                "is_searchable": true,
                                "shop_in_shop": false,
                                "logo": null,
                                "banner": null,
                                "shop_banner": null,
                                "sub_categories": []
                            }
                        ]
                    },
                    {
                        "id": 175,
                        "parent_id": 170,
                        "slug": "make-up-nails",
                        "name": "Nails",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": []
                    }
                ]
            },
            {
                "id": 177,
                "parent_id": 196,
                "slug": "skin-care",
                "name": "Skin Care",
                "is_searchable": true,
                "shop_in_shop": false,
                "logo": null,
                "banner": null,
                "shop_banner": null,
                "sub_categories": [
                    {
                        "id": 178,
                        "parent_id": 177,
                        "slug": "cleansers-toners",
                        "name": "Cleansers & Toners",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": []
                    },
                    {
                        "id": 179,
                        "parent_id": 177,
                        "slug": "masks-scrubs",
                        "name": "Masks & Scrubs",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": []
                    },
                  
                    {
                        "id": 181,
                        "parent_id": 177,
                        "slug": "serums-treatments",
                        "name": "Serums & Treatments",
                        "is_searchable": true,
                        "shop_in_shop": false,
                        "logo": null,
                        "banner": null,
                        "shop_banner": null,
                        "sub_categories": []
                    }
                ]
            },
            {
                "id": 192,
                "parent_id": 196,
                "slug": "beauty-tools",
                "name": "Tools & Accessories",
                "is_searchable": true,
                "shop_in_shop": false,
                "logo": null,
                "banner": null,
                "shop_banner": null,
                "sub_categories": []
            }
        ]
    },

正如你所看到的，第一个在sub_categories键的对象有一个空的list，但是第二个对象有一个嵌套的完全相同的对象！，那么我们如何在扩展图块的列表视图中显示这些数据，如果子类别为空，我们可以显示正常的列表图块，但如果对象具有嵌套的未知长度的子类别，我们将在扩展图块中显示它们。
基本上，硬编码每次迭代是不对的，因为我们不知道子类别的长度。

我用递归的方法解决了这个问题。
这是一个小部件，它检测是否嵌套或不基于列表长度。

class RecursiveDrawerItem extends StatelessWidget {
 final List categories;

 const RecursiveDrawerItem({Key? key, required this.categories})
    : super(key: key);

 @override
 Widget build(BuildContext context) {
return ListView.separated(
  separatorBuilder: (context, index) =>
      Divider(color: DaraghmehColors().grey),
  physics: const NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  itemCount: categories.length,
  itemBuilder: (BuildContext context, int index) {
    final category = categories[index];

    return category['sub_categories'].isEmpty
        ? ListTile(
            title: MediumFont(
                text: category['name'],
                textAlign: TextAlign.start,
                fontWeight: FontWeight.w400),
          )
        : ExpansionTileCard(
            animateTrailing: true,
            elevation: 0.0,
            expandedColor: Colors.white,
            shadowColor: Colors.white,
            baseColor: Colors.white,
            title: MediumFont(
                text: category['name'],
                textAlign: TextAlign.start,
                fontWeight: FontWeight.w400),
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.w),
                 /// recursive 
                child: RecursiveDrawerItem(
                    categories: category['sub_categories']),
              )
            ],
          );
     },
    );
 }
}

然后像这样使用这个类..

RecursiveDrawerItem(categories: drawerData.categories['categories']),

如何在flutter中显示嵌套的扩展块列表(类别与子类别)？

1条答案

相关问题

热门标签

最新问答