Flutter GridView滚动时如何统计已滚动展示的商品项数量

核心错误排查 #

你的计算逻辑存在两处核心问题：

1. 单位不匹配：_scrollController.offset返回的是滚动的像素偏移值，而count是商品总数量，两类不同单位的数值直接做除法没有业务意义，自然会得到错误结果。
2. 未结合网格布局属性计算：你使用的是2列网格布局，滚动行数、单商品高度这些核心参数都没有纳入计算逻辑。

修复方案 #

要得到已展示的商品数，需要先通过滚动偏移、单商品高度算出已滚动的行数，结合可视区域可容纳的行数、交叉轴列数，最终得到已展示商品总数，调整后的代码如下：

void _scrollListener() {
  // 跳过滚动控制器未绑定的异常场景
  if (!_scrollController.hasClients) return;
  const crossAxisCount = 2;
  // 注意：如果你的商品卡片有上下外边距/内边距，需要把对应间距也加到singleItemHeight中
  final singleItemHeight = itemHeight;
  // 计算已完全滚出可视区域的行数
  final scrolledRows = (_scrollController.offset / singleItemHeight).floor();
  // 计算当前可视区域最多可容纳的行数
  final viewportRows = (_scrollController.position.viewportDimension / singleItemHeight).ceil();
  // 计算当前已展示的商品总数
  int shownCount = (scrolledRows + viewportRows) * crossAxisCount;
  // 边界处理：已展示数量不能超过总商品数
  shownCount = shownCount > count ? count : shownCount;
  setState(() {
    index = shownCount;
  });
}

注意事项 #

• 如果你的DragSelectGridView设置了顶部padding，计算scrolledRows时需要先从滚动偏移中减去顶部padding的高度，避免行数计算偏差。
• 非必要不要设置shrinkWrap: true，该属性会让网格一次性渲染所有子元素，列表项较多时会严重影响性能，同时可能导致滚动控制器的视口参数计算错误。
• 如果你需要展示的是「当前可视区域第一个商品的序号/总商品数」，直接使用scrolledRows * crossAxisCount + 1作为展示值即可，同样要做边界判断，最小值为1，最大值为总商品数。

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