Flutter中GridView内SetState不生效问题求助

核心原因 #

你的问题出在自定义Product类的相等性判断上：Dart中默认的List.contains()方法是通过比较对象的引用地址来判断是否存在的。如果你的Product类没有重写==运算符和hashCode，即使两个Product对象的属性完全一致，只要是不同的实例，contains就会返回false，导致选中状态的判断逻辑失效，界面无法响应点击切换。

另外，原代码中重复写两次Image.asset的写法冗余，也容易出错。

解决方案 #

1. 重写Product类的==和hashCode #

给你的Product类添加相等性判断逻辑，基于产品的唯一标识（比如id）来判断两个对象是否相等：

class Product {
  final String id; // 确保每个产品有唯一ID
  final String image;
  final String name;

  Product({required this.id, required this.image, required this.name});

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Product &&
          runtimeType == other.runtimeType &&
          id == other.id;

  @override
  int get hashCode => id.hashCode;
}

2. 优化GridView代码（简化逻辑+修复状态更新） #

重构代码，用Opacity组件统一处理透明度，同时简化选中状态的判断逻辑：

SingleChildScrollView(
  child: SizedBox(
    height: 410,
    child: GridView.builder(
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisExtent: 160,
        crossAxisSpacing: 10,
      ),
      itemCount: data[0].products!.length,
      physics: const ScrollPhysics(),
      itemBuilder: (BuildContext ctx, index) {
        // 提前取出当前产品，避免重复调用data[0].products![index]
        final currentProduct = data[0].products![index];
        // 提前判断是否选中，提升代码可读性
        final isSelectedItem = isSelected.contains(currentProduct);

        return GestureDetector(
          onTap: () {
            setState(() {
              if (isSelectedItem) {
                isSelected.remove(currentProduct);
              } else {
                isSelected.add(currentProduct);
              }
            });
          },
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
            ),
            child: Column(
              children: [
                SizedBox(
                  height: 90,
                  // 用Opacity组件统一控制透明度，替代重复的Image.asset
                  child: Opacity(
                    opacity: isSelectedItem ? 1.0 : 0.5,
                    child: Image.asset(currentProduct.image),
                  ),
                ),
                const SizedBox(height: 8),
                Text(currentProduct.name),
              ],
            ),
          ),
        );
      },
    ),
  ),
)

额外说明 #

• 确保isSelected是一个List<Product>类型的变量，并且在组件的状态类中初始化（比如List<Product> isSelected = [];）。
• 重构后的代码减少了冗余，逻辑更清晰，同时解决了对象相等性判断的核心问题，点击后状态就能正确反映到界面上了。

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