Flutter：如何过滤列表并在水平ListView中展示特惠商品

你的代码存在几个核心问题导致无法展示特惠商品：

• 过滤逻辑写在itemBuilder内部，且每次循环都会重新初始化空列表，过滤结果根本没被使用
• itemBuilder没有返回任何Widget，ListView无法渲染内容
• itemCount硬编码为5，和实际过滤后的商品数量不匹配

以下是修复后的代码，完全基于StatelessWidget实现，不需要setState：

class ShoeTile extends StatelessWidget {
  const ShoeTile({super.key, required this.title, required this.shoeList});

  final String title;
  final List<Shoe> shoeList;

  @override
  Widget build(BuildContext context) {
    // 提前过滤出特惠商品，shoeList更新时会自动重新执行过滤
    final filteredShoes = shoeList.where((shoe) => shoe.isSpecialSale).toList();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 展示标题
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Text(
            title,
            style: const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        const SizedBox(height: 8),
        // 固定水平ListView高度，避免布局异常
        SizedBox(
          height: 200, // 根据实际鞋品卡片高度调整
          child: ListView.builder(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            scrollDirection: Axis.horizontal,
            // 使用过滤后的商品数量作为列表项总数
            itemCount: filteredShoes.length,
            itemBuilder: (context, index) {
              final shoe = filteredShoes[index];
              // 返回单个鞋品的展示卡片
              return Container(
                width: 150,
                margin: const EdgeInsets.only(right: 12),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Colors.grey[100],
                ),
                child: Column(
                  children: [
                    Image.asset(
                      shoe.imagePath,
                      height: 120,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(height: 8),
                    Text(shoe.brand, style: TextStyle(color: Colors.grey[600])),
                    Text(shoe.name, style: const TextStyle(fontWeight: FontWeight.w500)),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

关键修改说明 #

• 提前过滤数据：在build方法内用where过滤出isSpecialSale为true的商品，当父组件传入的shoeList更新时，StatelessWidget会自动重新执行build完成过滤，无需setState
• 动态设置itemCount：用过滤后的列表长度替代硬编码的数值，确保展示所有符合条件的特惠商品
• 返回具体渲染组件：在itemBuilder中实现单个鞋品的UI结构，让ListView能正常渲染内容
• 优化布局结构：添加标题展示，用SizedBox固定水平ListView的高度，避免Expanded可能引发的布局冲突

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