Flutter实现单个图标点击变色（解决全选异常问题）

你的问题核心是用了单个isSelected变量控制所有列表项的选中状态，导致一点击所有项同步变化。解决思路是利用你已定义的productIds集合单独跟踪每个选中项的ID，具体修改如下：

1. 删除全局isSelected变量
   直接移除状态类里的bool isSelected = false;，我们用productIds集合判断单个项是否选中。

2. 修改Leading按钮的点击逻辑
   点击时仅切换当前项ID在productIds中的存在状态，无需设置全局标记：

   leading: IconButton(
     icon: const Icon(Icons.add),
     onPressed: () {
       setState(() {
         final currentId = value.products[0].results![index].id!;
         if (productIds.contains(currentId)) {
           productIds.remove(currentId);
         } else {
           productIds.add(currentId);
         }
         print("products>>>> $productIds");
       });
     },
   ),
   

3. 修改Trailing图标的颜色判断
   直接根据当前项ID是否在productIds中决定颜色，确保每个项状态独立：

   trailing: IconButton(
     icon: Icon(
       Icons.done,
       color: productIds.contains(value.products[0].results![index].id!) 
           ? Colors.blue 
           : null,
     ),
     onPressed: () {
       setState(() {
         productIds.remove(value.products[0].results![index].id!);
         print(productIds);
       });
     },
   ),
   

4. 完整修改后的代码片段

   Consumer<ProductController>(
     builder: ((context, value, child) {
       if (value.products.isNotEmpty) {
         return Container(
           height: maxHeight * 0.3,
           child: ListView.builder(
             itemCount: value.products[0].results!.length,
             itemBuilder: (context, index) {
               final currentProductId = value.products[0].results![index].id!;
               return Card(
                 child: ListTile(
                   title: Text(value.products[0].results![index].name!),
                   leading: IconButton(
                     icon: const Icon(Icons.add),
                     onPressed: () {
                       setState(() {
                         if (productIds.contains(currentProductId)) {
                           productIds.remove(currentProductId);
                         } else {
                           productIds.add(currentProductId);
                         }
                         print("products>>>> $productIds");
                       });
                     },
                   ),
                   trailing: IconButton(
                     icon: Icon(
                       Icons.done,
                       color: productIds.contains(currentProductId) 
                           ? Colors.blue 
                           : null,
                     ),
                     onPressed: () {
                       setState(() {
                         productIds.remove(currentProductId);
                         print(productIds);
                       });
                     },
                   ),
                 ),
               );
             },
           ),
         );
       } else {
         return const CircularProgressIndicator();
       }
     }),
   ),
   

修改后，每个列表项的选中状态由自身ID是否在productIds集合中决定，点击某一项只会改变当前项的图标颜色，不会影响其他项。

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