Flutter中GroupedListView元素末尾出现空白区域，如何消除？

你的问题根源在于**itemBuilder中返回了空容器**，且未提前过滤不需要的元素：

• 当前代码会遍历_elements所有元素，当元素的ticketTypeName不等于目标值时，返回空Container()，这些空容器会被列表渲染并占据空间，最终导致末尾出现空白。
• 即便设置了shrinkWrap: true，空容器的尺寸依然会被计入列表总高度。

修复方案 #

1. 提前过滤元素：在传入elements参数时直接筛选符合条件的元素，避免渲染空容器：

GroupedListView<BookComposition, String>(
  shrinkWrap: true,
  // 先过滤掉不需要的元素
  elements: _elements.where((e) => e.ticketTypeName == ticketTypeName).toList(),
  groupBy: (element) => element.ticketTypeName!,
  groupComparator: (value1, value2) => value2.compareTo(value1),
  itemComparator: (item1, item2) => item1.ticketTypeName!.compareTo(item2.ticketTypeName!),
  order: GroupedListOrder.ASC,
  useStickyGroupSeparators: false,
  // 用SizedBox.shrink()替代高度0的Container，更简洁
  groupSeparatorBuilder: (String typeName) => SizedBox.shrink(),
  itemBuilder: (c, element) {
    // 所有元素都符合条件，直接返回ActionsTile即可
    return ActionsTile(...);
  },
),

2. 额外优化：如果过滤后所有元素的ticketTypeName都相同，groupBy、groupComparator这类分组配置可简化甚至移除，减少不必要的渲染逻辑。

补充说明 #

若确实需要保留所有元素但仅渲染符合条件的项，不要返回空Container()，改用SizedBox.shrink()（尺寸为0，不会占据空间），但更推荐提前过滤元素的方案，性能更优。

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