我有数据,我想在一个列表中显示,使用粘性头来分组每个记录。我已经找到了很多关于如何在水平上做到这一点的例子,但我有两个。所以每个记录都有一个主组和一个子组。因此,当用户滚动我想为当前的主组以及当前的子组是粘性。
数据集示例
Main Group 1
Sub Group 1
Record 1
...
Record n
Sub Group 2
...
Record n
...
Sub Group n
...
Record n
...
Main Group n
...
Sub Group n
...
Record n
我已经设法嵌套了3个ListViews并获得了所有要呈现的数据,并且还使用了sticky_headers包中的StickyHeader来获得主组的粘性,但是当在子组上使用StickyHeader时,它只是向右滚动通过了主组
ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int mainGroupIndex) {
return StickyHeader(
header: Text('Main Group: ${mainGroupIndex + 1}'),
content: ListView.builder(
itemCount: 10,
primary: false,
shrinkWrap: true,
itemBuilder: (BuildContext context, int subGroupIndex) {
return StickyHeader(
header: Text('Sub Group: ${subGroupIndex + 1}'),
content: ListView.builder(
itemCount: 10,
primary: false,
shrinkWrap: true,
itemBuilder: (BuildContext context, int recordIndex) {
return Text('Record: ${recordIndex + 1}');
},
),
);
},
),
);
},
)
在最坏的情况下,数据集将有大约100条记录,这些记录被分组在不同的主组和子组中,因此可以在嵌套列表中使用收缩 Package 为true,但如果有另一种方法来避免这种情况,那将是最好的。
有谁知道如何解决这个问题吗?
3条答案
按热度按时间xsuvu9jc1#
我可以通过将父
ListView.builder
的ScrollController
传递给父StickyHeader
和子StickyHeader
来创建嵌套的粘性标题,这样两个标题将获得相同的滚动相关信息。我扩展了类
StickyHeader
和RenderStickyHeader
,这样我们就可以添加偏移量,使子标题在滚动时保持在父标题之下。还要注意的是,这里我假设父头和子头的高度是相同的,如果不是这样,那么你应该把你的父头的高度作为参数发送给
_MyRenderStickyHeader
的performLayout
方法中的determineStuckOffsetWithHeight
方法。blmhpbnm2#
使用修改后的
flutter_sticky_header
可以实现这一点,即使是几个级别的深度。修改后的版本可以在这里找到:pull request。您可以将修改后的版本用于:
使用这种实现,您需要更改为
CustomScrollView
而不是ListView
。您的示例如下所示:vx6bjr1n3#
我想分享一个很棒的库,它允许你拥有多层嵌套的标题,并且是高度可定制的:flutter_sticky_infinite_list
查看工作演示:https://zapp.run/edit/z99i06vq99j0?theme=dark&lazy=false
对于一个没有嵌套头部的简单设置,您可以像这样使用它:
现在,如果你想添加一个嵌套的header,你可以把
StickyListItem
放在widget树的任何地方: