flutter - 使用嵌套的粘性标题创建列表

Question

我有想要显示在列表中的数据，使用粘性标题对每条记录进行分组。我已经找到了很多关于如何在关卡上执行此操作的示例，但我有两个。所以每条记录都会有一个主组和一个子组。因此，当用户滚动时，我希望当前主组和当前子组都具有粘性。

数据集示例

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 个 ListView 并获得了所有要呈现的数据，并且还使用了 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 条记录，这些记录被分组在不同的主要组和子组中，因此可以在嵌套列表中使用 shrink wrap to true，但如果有另一种方法可以避免这种情况那将是最好的。

有人对如何解决这个问题有任何想法吗？

Answer 1

使用修改后的 flutter_sticky_header 你可以实现这个，甚至是几个层次的深度。可以在此处找到修改后的版本:pull request .

您可以将修改后的版本用于:

dependency_overrides:
  flutter_sticky_header:
    git:
      url: https://github.com/UnderKoen/flutter_sticky_header.git
      ref: master

使用此实现，您需要更改为 CustomScrollView 而不是 ListView。您的示例如下所示:

CustomScrollView(
  slivers: List.generate(
    10,
    (i) => SliverStickyHeader(
      header: Text('Main Group $i'),
      slivers: List.generate(
        10,
        (j) => SliverStickyHeader(
          header: Text('Sub Group $j'),
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, k) => Text('Record $k'),
                childCount: 10,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
)