Flutter随机词列表心形图标点击无法切换填充状态及显示红色问题

你的代码逻辑存在一个核心错误：ListView.builder的项构建回调中，没有读取你已经存入_pairList的词对数据，反而每次渲染列表项时都调用WordPair.random()生成全新的随机词对：

• 点击时你存入_saved集合的是本次渲染临时生成的随机词对
• 下次组件触发重绘时，同一个索引位置又会生成完全不同的新词对，永远无法和_saved里存储的旧词对匹配，因此点击后心形图标和颜色都不会发生预期变化。

仅需要修改一行代码：把itemBuilder里生成随机词的逻辑，替换为从_pairList按当前索引取值即可。
修正后的完整代码如下：

final _pairList = <WordPair>[];
final _saved = <WordPair>{};

Widget wordListHolder() {
  return ListView.builder(
    padding: const EdgeInsets.all(26.0),
    itemBuilder: (BuildContext context, int index) {
      if (index >= _pairList.length) {
        _pairList.addAll(generateWordPairs().take(10));
      }
      // 这里修改为从已有的_pairList里取对应索引的词对，不要每次生成新的
      final _getword = _pairList[index];
      final alreadySaved = _saved.contains(_getword);

      return Column(
        children: <Widget>[
          ListTile(
            title: Text(_getword.asPascalCase),
            trailing: Icon(
              alreadySaved ? Icons.favorite : Icons.favorite_border,
              color: alreadySaved ? Colors.red : null,
            ),
            onTap: () {
              setState(() {
                if (alreadySaved) {
                  _saved.remove(_getword);
                } else {
                  _saved.add(_getword);
                }
              });
            },
          ),
          const Divider(),
        ],
      );
    },
  );
}

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