Flutter ListView.builder如何为过滤后元素添加自定义计数器代替index编号

解决方案 #

方案1（最优推荐：预处理数据源） #

先把原列表中符合展示条件的元素过滤出来生成新列表，直接用新列表渲染，天然支持连续编号，性能也更优，避免无效的Widget判断和构建：

// 先在build方法外或者状态中预处理列表
final filteredCarnetList = uD.userInfo.carnetList.where((item) => item.thematic == false).toList();

// 替换原ListView.builder代码
ListView.builder(
  cacheExtent: 2000,
  padding: const EdgeInsets.all(20),
  itemCount: filteredCarnetList.length,
  itemBuilder: (context, index) {
    final item = filteredCarnetList[index];
    return CarnetListCard2(
      index: index + 1, // 直接用当前index+1就是连续编号，从1开始计数
      taille: item.carnetWordId.length,
      titre: item.titre,
      dateCreation: item.creation,
      dateModification: item.modification,
      test: item.test,
      dateTest: item.testDate,
    );
  },
)

该方案优势：

• 完全避免了构建无意义的空占位组件，列表渲染性能更高
• 编号逻辑简单直观，不会出现重绘导致的编号错乱问题
• 后续需要对展示列表做排序、筛选等扩展操作也更方便

方案2（不修改数据源，实时计算编号） #

不推荐直接在itemBuilder外部声明可变计数器的实现方式，ListView滚动重绘时itemBuilder会反复执行，计数器会被重复累加导致编号错乱。如果必须保留原列表的遍历逻辑，可以在构建符合条件的元素时，实时计算当前元素之前的有效元素数量作为编号：

ListView.builder(
  cacheExtent: 2000,
  padding: const EdgeInsets.all(20),
  itemCount: uD.userInfo.carnetList.length,
  itemBuilder: (context, index) {
    final currentItem = uD.userInfo.carnetList[index];
    if (currentItem.thematic == false) {
      // 计算从列表开头到当前index范围内，符合条件的元素数量，即为连续编号
      int showIndex = uD.userInfo.carnetList.sublist(0, index + 1).where((item) => item.thematic == false).length;
      return CarnetListCard2(
        index: showIndex,
        taille: currentItem.carnetWordId.length,
        titre: currentItem.titre,
        dateCreation: currentItem.creation,
        dateModification: currentItem.modification,
        test: currentItem.test,
        dateTest: currentItem.testDate,
      );
    }
    return const SizedBox.shrink(); // 比Container更轻量的占位组件
  },
)

注意：该方案在列表数据量较大时会有性能损耗，因为每次构建有效元素都要遍历前半段列表计算数量，仅适合列表长度小于100的场景。

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