Flutter 返回分类选项卡和项目的列表 [英] Flutter return list of categorise tabs and items

问题描述

我是 flutter 的新手，我正在尝试实现菜单，如本示例中所示

 SliverAppBar(//<-- 自定义粘性菜单的应用栏backgroundColor: Colors.white,自动暗示领先:假，海拔:0.0，展开高度:600，//<-- 不适用于最小高度设置灵活空间:ScrollableListTabView(标签高度:50，bodyAnimationDuration:const 持续时间(毫秒:150)，tabAnimationCurve: Curves.easeOut,tabAnimationDuration:const 持续时间(毫秒:200)，标签: [ScrollableListTab(标签:列表标签(标签:文本('标签1')，图标:图标(Icons.group)，showIconOnList: 假),正文:ListView.builder(收缩包装:真实，物理:NeverScrollableScrollPhysics(),itemCount: _con.categories.length,itemBuilder:(上下文，索引){返回 ListTile(领先:容器(身高:40，宽度:40，装饰:BoxDecoration(形状:BoxShape.circle，颜色:Colors.grey),对齐:Alignment.center，孩子:文本(index.toString())，),title: Text('列表元素 $index'),);}))],),),

数组结构:

 数据":[{id":1，名称":美式炒饭"，价格":11，category_id":1，类别":{id":1，名称":谷物"，},},{id":5，名称":Pizza Valtellina"，价格":7.4，category_id":1，类别":{id":1，名称":谷物"，has_media":真，},},}],

解决方案

最适合您的情况的解决方案是使用包:

scroll_to_index: ^2.0.0rect_getter:^1.0.0

请关注本项目https://gist.github.com/debuggerx01/49f108d68ed90378184f>

Im new to flutter, Im trying to implement menu as in this example https://pub.dev/packages/scrollable_list_tabview, I have food array in structure like below, so I need to show the categories in the horizontal tabs, and the food items in the vertical list, so I need to show the items under its category label as well as under its category tab, I think it should be grouped by category id, but I don't know how to do it, also I set the hight(expandedHeight: 600,) manually but Im sure there is away to make it automatically, please help

                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'),
                                );

                              }
                            ))
                      ],
                    ),
                ),

Array Structure:

  "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,
        },
      },
     
      }
    ],

解决方案

the best solution for your case is to use the packages:

scroll_to_index: ^2.0.0 
rect_getter: ^1.0.0 

please follow this project https://gist.github.com/debuggerx01/49f108d68ed903458e9478b4f0c186f4

这篇关于Flutter 返回分类选项卡和项目的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！