使用 flutter 文档在每个视图块上创建带有心形图标的随机单词列表视图。（请在下面找到问题）

Question

问题：单击心形图标时，应该将图标类型从空心形更改为填充心形图标。此外，当点击心形图标时，它应该会显示红色，但现在也没有显示

请在下面找到特定小部件的相关代码

_pairList 是正在渲染的随机英文单词列表， _saved 是一个集合，其中包含通过单击心形图标选择的值

WordPair是导入的随机英文单词的dart库

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)); /*4*/
        }
        final _getword = WordPair.random();
        final alreadySaved = _saved.contains(_getword);

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

Answer 1

试试这个：

final _getword = WordPair.random();
if (index >= _pairList.length) {
          _pairList.add(_getword); 
        }

我认为您的 _pairList 和 _saved 列表中应该有相同的项目。

使用 flutter 文档在每个视图块上创建带有心形图标的随机单词列表视图。（请在下面找到问题）

Creating a list view of random words with heart icon on each view tile using the flutter documentation. (Please find the problem below)

flutter

listview

mobile

flutter-layout

icons

使用 flutter 文档在每个视图块上创建带有心形图标的随机单词列表视图。 （请在下面找到问题）

Creating a list view of random words with heart icon on each view tile using the flutter documentation. (Please find the problem below)

flutter

listview

mobile

flutter-layout

icons

使用 flutter 文档在每个视图块上创建带有心形图标的随机单词列表视图。（请在下面找到问题）