Flutter ListView.builder如何让onPressed仅作用于被点击的对应列表项

问题原因 #

你当前声明的isPressed是整个页面级的全局状态，所有列表项共用这一个状态值，只要修改就会同步作用到所有卡片的收藏图标上，自然会出现点一个全变的问题。

解决方法 #

我们需要给每一个列表项维护独立的收藏状态，推荐两种实现方案：

方案1：在数据模型中新增收藏状态字段（推荐）

如果你的列表对应有自定义数据类，直接在类里加isFavorited布尔字段即可：

1. 先定义数据模型

class CardItem {
  final int id;
  final String title;
  // 新增字段存储当前项的收藏状态，默认未收藏
  bool isFavorited;

  CardItem({required this.id, required this.title, this.isFavorited = false});
}

2. 页面内声明列表数据

List<CardItem> cardList = [
  CardItem(id: 1, title: "卡片1"),
  CardItem(id: 2, title: "卡片2"),
  // 其他数据项
];

3. 修改ListView.builder内的点击逻辑

ListView.builder(
  itemCount: cardList.length,
  itemBuilder: (context, index) {
    final currentItem = cardList[index];
    return Card(
      child: IconButton(
        icon: Icon(
          Icons.favorite,
          // 取当前项自身的状态判断图标颜色
          color: currentItem.isFavorited ? Colors.red : Colors.grey,
        ),
        onPressed: () {
          setState(() {
            // 仅修改当前点击项的状态
            currentItem.isFavorited = !currentItem.isFavorited;
          });
        },
      ),
    );
  }
)

方案2：单独维护已收藏集合

如果不想修改原数据模型，可以单独用Set存储已收藏项的唯一标识：

1. 页面内声明存储集合

// 存储已收藏的卡片id，没有id的场景也可以存储列表索引
Set<int> favoritedCardIds = {};

2. 修改ListView.builder内的逻辑

ListView.builder(
  itemCount: cardList.length,
  itemBuilder: (context, index) {
    final currentItem = cardList[index];
    final isFavorited = favoritedCardIds.contains(currentItem.id);
    return Card(
      child: IconButton(
        icon: Icon(
          Icons.favorite,
          color: isFavorited ? Colors.red : Colors.grey,
        ),
        onPressed: () {
          setState(() {
            if (isFavorited) {
              favoritedCardIds.remove(currentItem.id);
            } else {
              favoritedCardIds.add(currentItem.id);
            }
          });
        },
      ),
    );
  }
)

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