Flutter中基于另一列表过滤列表及嵌套ListView滚动偏移问题

你的问题根源出在内层水平ListView的构建逻辑上——当前你是遍历整个categoryItemList，对不符合条件的项返回空的Container()，这些空容器会占据水平滚动的空间，导致滚动时出现不必要的偏移，同时还会浪费渲染性能。

正确做法：提前预处理数据，为每个分类筛选好对应汽车项 #

先把每个分类下符合条件的汽车列表提前筛选出来，这样内层ListView只需要渲染有效项，不会产生空容器，自然就能解决滚动偏移问题。

具体步骤和代码示例如下：

1. 先创建一个映射，将分类名称与对应的符合条件的汽车列表关联
2. 外层ListView遍历分类时，直接从映射中取出对应数据传给内层ListView

// 第一步：预处理数据，提前筛选每个分类下符合条件的汽车项
final Map<String, List<YourCarModel>> categoryToCars = {};

// 初始化映射（如果是StatefulWidget，建议放在initState里执行）
for (var category in categoriesOnlyList) {
  final filteredCars = categoryItemList.where((car) => 
    car.CategoryName == category.Name && car.ID.startsWith("105")
  ).toList();
  categoryToCars[category.Name] = filteredCars;
}

// 第二步：修改嵌套ListView的构建逻辑
ListView.builder( // 外层垂直分类列表
  shrinkWrap: true,
  scrollDirection: Axis.vertical,
  itemCount: categoriesOnlyList.length,
  itemBuilder: (context, index1) {
    final currentCategory = categoriesOnlyList[index1];
    // 取出当前分类对应的有效汽车列表，为空时返回空数组
    final currentCars = categoryToCars[currentCategory.Name] ?? [];
    
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            margin: EdgeInsets.only(left: 20),
            child: Text(
              currentCategory.Name,
              textAlign: TextAlign.start,
              style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 18),
            ),
          ),
        ),
        Container(
          height: 300,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
          ),
          child: ListView.builder( // 内层水平汽车列表
            shrinkWrap: true,
            itemCount: currentCars.length, // 仅渲染有效项的数量
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index){
              final car = currentCars[index];
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(car.Name,style: TextStyle(color: Colors.white70),),
                ),
              );
            }),
        )
      ],
    );
  },
)

额外优化建议 #

• 如果是StatefulWidget，把数据预处理逻辑放在initState中执行，避免每次build都重复筛选数据
• 内层ListView可以添加physics: ClampingScrollPhysics()，避免和外层滚动产生冲突（按需使用）
• 记得把代码中的YourCarModel替换成你实际使用的汽车数据模型类

这样修改后，内层ListView只会渲染对应分类下的有效汽车项，不会有空容器占用滚动空间，滚动偏移问题就能解决，同时代码的可读性和性能也会提升。

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