Flutter ListView 不使用 setState() 刷新 UI，尽管 itemCount 和附加列表正确更新

Question

我看到很多人有非常相似的问题，但我尝试的任何方法都不起作用。

上下文

我有一个收藏的想法列表。每当我单击ideaItem 内的按钮时，它都会从列表中删除。

问题

当我删除任何ideaItem 时，屏幕上的最后一个总是被删除，而不是我点击的那个。我的 FavoriteIdeasListView 似乎正确更新了项目数，这意味着附加的列表有效，但 UI 没有重绘 ideaItems。

我已经尝试过什么

• 一开始我直接在ideaItem 上有删除功能，我读到我应该做一个VoidCallback 并处理从列表本身删除，所以它会注意到变化。没用

• 我也尝试过使用 Stream Builder，因此流会通知 ListView 刷新。也没用

• 我尝试一直调用 SetState 并且它没有重新加载，它只是在 initialState 的开头构建列表。

    class FavoritesList extends StatefulWidget {
      FavoritesList({Key key}) : super(key: key);

      @override
      _FavoritesListState createState() => _FavoritesListState();
    }

    class _FavoritesListState extends State<FavoritesList> {

      List<Idea> _favorites = [];

      @override
      void initState() {
        super.initState();
        favoritesInitialState();
      }

      Future <void> favoritesInitialState() async {
        List<Idea> ideas = await IdeasDB.db.ideas();
        setState(() {
          _favorites = ideas;
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Favorites')),
            body: Center(
              child: ListView.builder(
                itemCount: _favorites.length,
                itemBuilder: (context, index) {
                  final idea = _favorites[index];
                  return IdeaItem(
                    idea: idea,
                    onFavoriteToggle: () => deleteFromFavorites(idea),
                  );
                },
              ),
            )
        );
      }

      void deleteFromFavorites(Idea idea) async {
        await IdeasDB.db.deleteIdea(idea.url);
        List<Idea> newIdeas = await IdeasDB.db.ideas();
        setState(() {
          this._favorites = newIdeas;
        });
      }
    }

Answer 1

尝试改变

onFavoriteToggle: () => deleteFromFavorites(index),

然后

  void deleteFromFavorites( int index) async {
    await IdeasDB.db.deleteIdea(idea.url);
    setState(() {
      this._favorites.removeAt(index);
    });
  }

看看它是否有效。如果是，deleteIdea() 上可能有错误。

此外，您知道应该删除哪个项目，因此您无需等待从数据库中重新加载列表。 await IdeasDB.db.ideas();

如果您想确保可以使用 Try catch 包装您的代码

  void deleteFromFavorites(int index) async {
    try {
      await IdeasDB.db.deleteIdea(idea.url);
      setState(() {
        this._favorites.removeAt(index);
      });
    } catch (_) {
      print('ERROR');
    }
  }

Answer 2

对于为什么会发生这种情况，我只能看到两种可能的选择。

第一个很明显，您的IdeasDB.db.deleteIdea(idea.url); 没有从数据库中删除正确的想法；

第二个不太明显，这是因为您的元素树无法识别您要删除的小部件是什么。它只发生在有状态的小部件上，就像您的 IdeaItem 一样。

然后解决方案是为您的IdeaItem 小部件使用key 属性 像这样：

ListView.builder(
  itemCount: _favorites.length,
  itemBuilder: (context, index) {
    final idea = _favorites[index];
    return IdeaItem(
      key: ValueKey(idea.url) // or UniqueKey()
      idea: idea,
      onFavoriteToggle: () => deleteFromFavorites(idea),
    );
  },
),

在您的 IdeaItem 小部件中，您必须将该密钥传递给您的父级 Stateful widget，如下例所示：

class IdeaItem extends StatefulWidget {
  final Idea idea;
  Function onFavoriteToggle;

  IdeaItem({Key key, this.idea, this.onFavoriteToggle}) : super(key: key);

  @override
  _IdeaItemState createState() => _IdeaItemState();
}