如何跳过GroupedListView.builder中的项目

Question

我正在使用

GroupedListView.builder

来构建聊天消息。我试图在同一条消息中依次显示同一用户发送的多张图像。首先，我在构建消息时检测同一用户是否发送了至少 4 张图像；然后，获取这些图像的 URL 并使用

GridView.builder

:

显示它们

GridView.builder(
    itemCount: groupedImages.length,
    itemBuilder: (context, index) {
      return ImagePreview(
        imageUrl: groupedImages[index].url!,
        sender: sender,
        isMe: sender == groupedImages[index].sender,
        width: width,
        height: height,
        id: groupedImages[index].id,
        date: date,
      );
    },
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
  ),
............

void getAllConsecutiveImages() {
for (var element in messages) {
  if (element.type.toLowerCase().contains('image') &&
      element.sender == sender) {
    groupedImages.add(element);
  } else {
    break;
  }
}

}

我的问题是我需要删除或跳过已经获得的图像。

Answer 1

您有多种解决方案可以做到这一点。

您可以在您的状态中维护一个列表，该列表已缩小并且仅包含每个图像的一个示例，然后围绕该列表创建构建器。

final List<Image> groupedImageReduced = groupedImage.where((element){
  // 'alreadyDisplayed' must be true when 2 images are the same
  if(alreadyDisplayed){
    return false;
  }else{
    return true;
  }
});

这样您将得到一个仅包含您想要的元素的列表。

否则，您可以通过在图像已显示时返回 Container 来跳过构建器中所需的情况，但这比第一个解决方案更脏

GridView.builder(
    itemCount: groupedImages.length,
    itemBuilder: (context, index) {
      if(alreadyDisplayed){
        return Container();
      }else{
        return ImagePreview(
          imageUrl: groupedImages[index].url!,
          sender: sender,
          isMe: sender == groupedImages[index].sender,
          width: width,
          height: height,
          id: groupedImages[index].id,
          date: date,
        );
      }
    },
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
  ),