Flutter 的分组列表包

一个 Flutter 列表视图，其中列表项可以分组到各个部分。

screenshot-for-readme

入门

将包添加到您的 pubspec.yaml

grouped_list: ^1.3.1

在您的 dart 文件中，导入库

import 'package:grouped_list/grouped_list.dart';

不要使用 ListView，而是创建一个 GroupedListView Widget

 GroupedListView(
   elements: _elements,
   groupBy: (element) => element['group'],
   groupSeparatorBuilder: _buildGroupSeparator,
   itemBuilder: (context, element) => Text(element['name']),
   order: GroupedListOrder.ASC,
 ),

您还可以使用 ListView.builder 构造函数中的大多数字段。

必需参数

  • elements：要显示在列表中的数据列表。
  • groupBy：将元素映射到其分组值的函数。
  • itemBuilder：返回定义项的 Widget 的函数。
  • groupSeparator：返回定义节分隔符的 Widget 的函数。
Widget _buildGroupSeparator(dynamic groupByValue) {
  return Text('$groupByValue');
}

groupByValue 参数的返回类型是已定义的 groupBy 函数的返回类型。

可选参数

  • order：默认值为 GroupedListOrder.ASC。更改为 GroupedListOrder.DESC 可反转组排序。
  • separator：一个 Widget，用于定义一个节内各项之间的分隔符。
  • sort：一个布尔值，定义 Widget 是否应排序传递的数据。默认值为 true。

通知

  • itemBuilder 函数仅创建实际的列表项。要分隔项，请使用 separator 参数。
  • 与 ListView.builder 构造函数的 itemBuilder 函数不同，该函数提供特定元素作为参数，而不是索引。
  • 元素需要根据 groupBy 的返回值进行排序。Widget 默认会排序元素。仅当您的列表已预先排序时，才禁用排序。

GitHub

https://github.com/Dimibe/grouped_list