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 返回分类选项卡和项目的列表的主要内容,如果未能解决你的问题,请参考以下文章