Flutter GroupedListView实现分组间添加分隔线的技术问询

要实现每个日期分组底部添加分隔线，不需要给所有列表项都加布局嵌套，只需在itemBuilder中判断当前元素是否为所在分组的最后一项，仅在最后一项下方添加分隔线即可。

修改后的代码如下：

GroupedListView<dynamic, String>(
  padding: const EdgeInsets.symmetric(horizontal: 30.0, vertical: 40.0),
  elements: _elements,
  groupBy: (element) => element['day'],
  groupHeaderBuilder: createGroupHeader,
  itemBuilder: (context, dynamic element) {
    // 获取当前元素所属分组的全部元素
    final groupElements = _elements.where((e) => e['day'] == element['day']).toList();
    // 判断是否为分组的最后一项
    final isLastInGroup = groupElements.last == element;

    return Column(
      children: [
        ListItem(
          time: element['time'],
          title: element['notification'],
        ),
        // 仅在分组最后一项下方渲染分隔线
        if (isLastInGroup)
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: Divider(
              color: Colors.black26,
              thickness: 1,
            ),
          ),
      ],
    );
  },
  itemComparator: (item1, item2) => item1['notification'].compareTo(item2['notification']),
  groupComparator: (item1, item2) => item1[1].compareTo(item2[1]),
  useStickyGroupSeparators: false,
  floatingHeader: true,
  order: GroupedListOrder.DESC,
);

逻辑说明： #

1. 通过where过滤出当前元素所属分组的全部元素，转为列表后判断当前元素是否为该列表的最后一项
2. 利用Dart的条件渲染语法，仅在分组最后一项下方显示分隔线，避免每个ListItem都额外添加分隔线

如果需要在分组之间（而非分组底部）添加分隔，也可以启用你注释掉的groupSeparatorBuilder，调整其样式即可实现分组间的分隔效果。

内容的提问来源于stack exchange，提问作者ishola sobuur