Flutter使用GridView.count分品类展示商品列表出现网格空白的问题求解

GridView.count会为children列表内的每一个元素分配固定尺寸的网格单元格。原实现遍历全量商品列表时，对不符合当前页品类的条目返回SizedBox.shrink()占位，这类不可见组件依然会占用完整网格位置，最终导致商品排布错位，出现大量无意义空白。

不要遍历全量商品列表再塞入空占位，先根据当前页需要展示的品类过滤出对应商品子集，再用过滤后的列表生成网格组件的children，从根源移除多余占位元素。

操作步骤 #

• 对目标品类做列表过滤：汉堡页提取所有isBurgers == true的商品，甜甜圈页提取所有isDonuts == true的商品
• 移除原逻辑中return SizedBox.shrink()的空分支，直接将过滤后的商品映射为网格组件

汉堡页网格 #

child: GridView.count(
  shrinkWrap: true,
  mainAxisSpacing: 15.0,
  crossAxisSpacing: 20.0,
  crossAxisCount: 2,
  childAspectRatio: (SizeConfig.itemWidth / SizeConfig.itemHeight),
  children: sweets
      .where((sweet) => sweet.isBurgers)
      .map((sweet) => ChangeNotifierProvider.value(
            value: sweet,
            child: SweetCard(),
          ))
      .toList(),
)

甜甜圈页网格 #

child: GridView.count(
  shrinkWrap: true,
  mainAxisSpacing: 15.0,
  crossAxisSpacing: 20.0,
  crossAxisCount: 2,
  childAspectRatio: (SizeConfig.itemWidth / SizeConfig.itemHeight),
  children: sweets
      .where((sweet) => sweet.isDonuts)
      .map((sweet) => ChangeNotifierProvider.value(
            value: sweet,
            child: SweetCard(),
          ))
      .toList(),
)

• 可在Sweets类中封装品类过滤逻辑，例如添加getter方法：
  • List<Sweet> get burgerSweets => _allSweets.where((s) => s.isBurgers).toList()
  • List<Sweet> get donutSweets => _allSweets.where((s) => s.isDonuts).toList()
    避免在UI层重复编写过滤逻辑
• 商品列表长度较大时，可将GridView.count替换为GridView.builder，仅构建可视区域内的网格组件，降低性能消耗

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