Flutter 返回分类选项卡和项目的列表

Posted

技术标签:

【中文标题】Flutter 返回分类选项卡和项目的列表【英文标题】:Flutter return list of categorise tabs and items 【发布时间】:2021-12-15 05:19:40 【问题描述】:

我是 Flutter 的新手,我正在尝试像本例中那样实现菜单 https://pub.dev/packages/scrollable_list_tabview,我有如下结构的食物数组,所以我需要在水平选项卡中显示类别,在垂直列表中显示食物项目,所以我需要在其类别标签下以及在其类别选项卡下显示项目,我认为它应该按类别ID分组,但我不知道该怎么做,我也设置了高度(expandedHeight:600 ,) 手动,但我确定可以自动完成,请帮助

                SliverAppBar( // <-- app bar for custom sticky menu
                    backgroundColor: Colors.white,
                    automaticallyImplyLeading: false,
                    elevation: 0.0,
                    expandedHeight: 600,
                    // <-- doesn't work for minimum height setup
                    flexibleSpace: ScrollableListTabView(
                      tabHeight: 50,
                      bodyAnimationDuration: const Duration(milliseconds: 150),
                      tabAnimationCurve: Curves.easeOut,
                      tabAnimationDuration: const Duration(milliseconds: 200),
                      tabs: [
                        ScrollableListTab(
                            tab: ListTab(
                                label: Text('Label 1'),
                                icon: Icon(Icons.group),
                                showIconOnList: false),
                            body: ListView.builder(
                              shrinkWrap: true,
                              physics: NeverScrollableScrollPhysics(),
                              itemCount: _con.categories.length,
                               itemBuilder: (context, index) 
                                return ListTile(
                                  leading: Container(
                                    height: 40,
                                    width: 40,
                                    decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        color: Colors.grey),
                                    alignment: Alignment.center,
                                    child: Text(index.toString()),
                                  ),
                                  title: Text('List element $index'),
                                );

                              
                            ))
                      ],
                    ),
                ),

数组结构:

  "data": [
      
        "id": 1,
        "name": "American fried rice",
        "price": 11,
        "category_id": 1,
        "category": 
          "id": 1,
          "name": "Grains",
        ,
      ,


      
        "id": 5,
        "name": "Pizza Valtellina",
        "price": 7.4,
        "category_id": 1,
       
        "category": 
          "id": 1,
          "name": "Grains",
          "has_media": true,
        ,
      ,
     
      
    ],

【问题讨论】:

这也是我关心的问题,抱歉希望有人能尽快回复你 【参考方案1】:

您的情况的最佳解决方案是使用这些包:

scroll_to_index: ^2.0.0 
rect_getter: ^1.0.0 

请关注这个项目 https://gist.github.com/debuggerx01/49f108d68ed903458e9478b4f0c186f4

【讨论】:

以上是关于Flutter 返回分类选项卡和项目的列表的主要内容,如果未能解决你的问题,请参考以下文章

如何使选项卡和选项卡栏视图在颤动中动态化,以便它能够响应来自 api 的响应?

遍历选项卡列表并使用 if 语句显示不同的视图

iOS中的自定义图像“更多”选项卡和更多项目中的图像颜色

检测单击当前活动的选项卡。 (角材料选项卡)

iOS 以编程方式转到选项卡和推送视图控制器

点击 Tab bar 过滤列表 Flutter