listview - 如何在 Flutter 的粘性标题下对列表项进行分组

Question

我正在尝试对我的列表项进行分组并为每个组创建一个粘性标题。每组中的项目数可能不同。因此，我搜索并找到了一个名为 sticky_headers 0.1.8+1 的包。这很酷，但它正在为每一行创建标题。我找不到将相似项目分组在同一标题下的方法。这是我的代码；

class FixtureList extends StatelessWidget {
  final dateFormat = DateFormat('MMMd');
  final timeFormat = DateFormat('Hm');

  @override
  Widget build(BuildContext context) {
    return Consumer<FixtureData>(
      builder: (context, fixtureData, child) {
        return ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            final fixture = fixtureData.fixtures[index];

            return StickyHeader(
              header: Container(
                height: 30.0,
                color: Colors.lightBlueAccent,
                padding: EdgeInsets.symmetric(horizontal: 8.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  dateFormat.format(fixture.dateTime.toLocal()),
                  style: const TextStyle(color: Colors.black),
                ),
              ),
              content: FixtureTile(
                date: dateFormat.format(fixture.dateTime.toLocal()),
                time: timeFormat.format(fixture.dateTime.toLocal()),
                homeTeam: fixture.homeTeam,
                awayTeam: fixture.awayTeam,
                homeOdds: fixture.homeOdds,
                drawOdds: fixture.drawOdds,
                awayOdds: fixture.awayOdds,
                isHomeSelected: fixture.homeSelected,
                isDrawSelected: fixture.drawSelected,
                isAwaySelected: fixture.awaySelected,
                homeCallBack: () =>
                    fixtureData.updateSelection(fixture, 'home'),
                drawCallBack: () =>
                    fixtureData.updateSelection(fixture, 'draw'),
                awayCallBack: () =>
                    fixtureData.updateSelection(fixture, 'away'),
              ),
            );
          },
          itemCount: fixtureData.fixtures.length,
        );
      },
    );
  }
}

Answer 1

你可以使用 grouped_list这个用例的包。它允许您根据自定义条件对数据进行分组，如果您已经使用 ListView，它也很容易使用。

class FixtureList extends StatelessWidget {
    final dateFormat = DateFormat('MMMd');
    final timeFormat = DateFormat('Hm');

    @override
    Widget build(BuildContext context) {
    return Consumer<FixtureData>(
      builder: (context, fixtureData, child) {
        return GroupedListView<FixtureData, string>(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          groupBy: (fixture) => // return the value by which the fixtures should be grouped,
          groupSeparatorBuilder: (String groupByValue) {
            // your widget for group headers here
          },
          itemBuilder: (context, fixture) {
            // your widget for items here
          },
          elements: fixtureData.fixtures, // instead of itemCount here the list of objects is passed
        );
      },
    );
  }
}