滚动时列表的图标状态恢复

Posted 2023-04-19

【中文标题】滚动时列表的图标状态恢复

【英文标题】：List's icon state reverts when I scroll

【发布时间】：2021-10-18 07:15:58

【问题描述】：

我正在屏幕上呈现从 api 获取的列表。我为列表中的每个项目都有一个保存按钮，单击时会更改。它工作正常，但是当我滚动列表时它会恢复。我认为这是因为列表构建器一次又一次地构建列表，但我想不出解决用户单击时图标状态的解决方案。这是代码的一部分：

....
class NewsListBuilderItemsState extends State<NewsListBuilderItems> 
  final _repository = Repository();
  bool selected = false;
...

这是按钮：

                  GestureDetector(
                    child: Icon(selected
                        ? Icons.bookmark
                        : Icons.bookmark_border_outlined),
                    onTap: () 
                      setState(() 
                        selected = !selected;
                        _repository.addToDb(
                            widget.snapshot.data[widget.index]);

                        bloc.addToSavedNews(
                            widget.snapshot, widget.index);
                      );
                    ,
                  )

【参考方案1】：

问题是，您仅在项目级别处理“选定”状态。因此，如果项目超出可见区域，它会自行销毁，如果您向后滚动，它会以初始状态重新创建自己。您需要从项目上方传递所选信息。最有可能在您映射所有新闻的地方。您应该从那里的 db (bloc) 中获取选定的值并将其作为参数传递给新闻项。

【讨论】：

我的按钮在此小部件上，并且图标在此处更改，因此此处所选内容将被更改。我该怎么做？

【参考方案2】：

你有多个列表项，很明显你不能只用一个变量来管理状态。您需要制作一个布尔值列表，列表的长度应等于列表的长度。然后在 setState 中，您应该更改该项目索引处的布尔值。

....
   class NewsListBuilderItemsState extends State<NewsListBuilderItems> 
   final _repository = Repository();
   List<bool> selected = [];
...

注意：-

GestureDetector(
                child: Icon(selected[index]

                    ? Icons.bookmark
                    : Icons.bookmark_border_outlined),
                onTap: () 
                  setState(() 
                    selected[index] = !selected[index];
                    _repository.addToDb(
                        widget.snapshot.data[widget.index]);

                    bloc.addToSavedNews(
                        widget.snapshot, widget.index);
                  );
                ,
              )

【讨论】：

我认为 NewsListBuilderItems 是每个项目的有状态小部件。在小部件树中，上面的小部件，我的意思是你有列表视图的小部件。您需要更改该小部件的状态并将每个列表项设为无状态。