如何删除SliverGrid.count中的空白占位区域或空Container？

你当前出现空白占位的核心原因是：SliverGrid.count 会为传入的 children 列表中的每一个元素都分配固定的网格位，哪怕你给不符合条件的条目返回了空 Container 或者 null，网格位置依然会被占用，因此出现空白区域。

解决方案 #

1. 先过滤数据源，仅保留需要展示的、addToCart == 1 的条目，不要将不符合条件的元素传入 children 列表
2. 原来的条目奇偶判断加左右边距的逻辑可以简化，直接给 SliverGrid 设置水平padding即可，和你原来的效果一致，无需单独处理每个item的margin

修改后的代码示例：

class _myCartItemDisplayState extends State<myCartItemDisplay> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar(
        title: '购物车',
        myBarColor: Colors.white,
        mybackWidget: HomeScreen(),
      ),
      bottomNavigationBar: AppBottomNavigation(),
      backgroundColor: Colors.white,
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverPadding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              sliver: SliverGrid.count(
                crossAxisCount: 2,
                childAspectRatio: 0.65,
                mainAxisSpacing: 16,
                crossAxisSpacing: 16,
                // 先过滤符合条件的条目，再生成对应的widget
                children: Fake.furniture
                    .where((item) => item.addToCart == 1)
                    .map((item) => myGridItem(item: item))
                    .toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如果你有特殊需求必须保留原始索引的奇偶判断逻辑，也可以在过滤时保留原始索引信息：

children: Fake.furniture.asMap().entries
    .where((entry) => entry.value.addToCart == 1)
    .map((entry) => myGridItem(
        item: entry.value,
        margin: EdgeInsets.only(
          left: entry.key.isEven ? 16 : 0,
          right: entry.key.isOdd ? 16 : 0,
        ),
    )).toList()

如果你更倾向用 SliverChildBuilderDelegate 实现，写法如下：

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 0.65,
    mainAxisSpacing: 16,
    crossAxisSpacing: 16,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      final validItems = Fake.furniture.where((item) => item.addToCart == 1).toList();
      return myGridItem(item: validItems[index]);
    },
    childCount: Fake.furniture.where((item) => item.addToCart == 1).length,
  ),
)

内容的提问来源于stack exchange，提问作者Mo7ammed 7amad