Flutter ListView中如何实现多个勾选按钮独立切换颜色状态

你在列表父组件中定义了单一公共变量iconColor，所有列表项的对勾图标都共用这个变量控制颜色。点击按钮修改这个变量后，所有列表项重建时都会读取到更新后的颜色值，自然会全部同步变色。
另外你添加商品时已经在Firestore中写入了isbought状态字段，完全可以直接复用这个字段持久化存储商品购买状态，应用重启后状态也不会丢失，是最合理的实现方式。

方案1：状态持久化到Firestore（推荐） #

直接复用已预留的isbought字段，不需要在本地内存存储任何状态，所有状态跟随Firestore文档同步：

• 删除_HomeScreenProductListState中定义的全局iconColor变量
• 点击对勾按钮时，更新对应商品文档的isbought字段为取反后的值
• 渲染对勾图标颜色时，直接读取当前商品文档的isbought字段判断：为true显示绿色，为false显示红色

修改后的HomeScreenProductList代码如下：

class HomeScreenProductList extends StatefulWidget {
  const HomeScreenProductList({Key? key}) : super(key: key);

  @override
  State<HomeScreenProductList> createState() => _HomeScreenProductListState();
}

class _HomeScreenProductListState extends State<HomeScreenProductList> {
  final CollectionReference _productsCollection =
      FirebaseFirestore.instance.collection('products');

  final Stream<QuerySnapshot> _products = FirebaseFirestore.instance
      .collection('products')
      .orderBy('product-name')
      .snapshots();

  deleteProduct(id) async {
    await _productsCollection.doc(id).delete();
  }

  // 更新商品购买状态
  toggleProductBoughtStatus(String docId, bool currentStatus) async {
    await _productsCollection.doc(docId).update({
      'isbought': !currentStatus
    });
  }

  Color tileColor = const Color.fromARGB(100, 158, 158, 158);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
        stream: _products,
        builder: (
          BuildContext context,
          AsyncSnapshot<QuerySnapshot> snapshot,
        ) {
          if (snapshot.hasError) {
            return const Text('Something went wrong');
          }
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Text('Loading data');
          }

          final productData = snapshot.requireData;

          return ListView.builder(
            padding: const EdgeInsets.only(top: 16.0),
            itemCount: productData.size,
            itemBuilder: (context, index) {
              // 单独获取当前项的商品数据
              var currentProduct = productData.docs[index];
              bool isBought = currentProduct['isbought'] ?? false;
              return Card(
                child: ListTile(
                  leading: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        // 每个项单独根据自身文档的isbought值设置颜色
                        icon: Icon(Icons.check, color: isBought ? Colors.green : Colors.red),
                        onPressed: () {
                          // 仅更新当前对应文档的状态
                          toggleProductBoughtStatus(currentProduct.id, isBought);
                        },
                      )
                    ],
                  ),
                  tileColor: tileColor,
                  shape: const UnderlineInputBorder(
                      borderSide: BorderSide(
                          width: 1, color: Color.fromARGB(120, 220, 220, 220))),
                  title: Text('${currentProduct['product-name']}'),
                  textColor: const Color.fromARGB(255, 0, 0, 0),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        icon: const Icon(Icons.delete),
                        color: Colors.red,
                        padding: EdgeInsets.zero,
                        constraints: const BoxConstraints(),
                        onPressed: () {
                          print("Delete Button Pressed");
                          deleteProduct(currentProduct.id);
                        },
                      )
                    ],
                  ),
                ),
              );
            },
          );
        });
  }
}

方案2：仅本地临时存储状态 #

如果不需要持久化状态，只想在当前应用运行周期内实现按钮独立状态，可以用Set存储已选中的商品文档id，不要用单个颜色变量：

• 删除全局iconColor变量，新增Set<String> selectedProductIds = {};存储选中的商品id
• 点击对勾时，判断当前商品id是否在Set中：存在就移除，不存在就加入
• 渲染图标颜色时，判断当前商品id是否在Set中，存在就显示绿色，否则显示红色

核心实现片段：

// 替换原有iconColor定义
Set<String> selectedProductIds = {};

// ListTile中leading的IconButton逻辑
IconButton(
  icon: Icon(
    Icons.check, 
    color: selectedProductIds.contains(currentProduct.id) ? Colors.green : Colors.red
  ),
  onPressed: () {
    setState(() {
      if (selectedProductIds.contains(currentProduct.id)) {
        selectedProductIds.remove(currentProduct.id);
      } else {
        selectedProductIds.add(currentProduct.id);
      }
    });
  },
)

注意：本地存储的状态会在应用重启、页面销毁后丢失，优先选择方案1实现。

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